|
|
Rank: Advanced Member
Groups: Registered
Joined: 10/12/2010
Posts: 31
|
Hello,
I'm working on making my web app accessible, and as such it needs to be usable by clients who use only a keyboard. What element should i be targetting to trigger the click of to open up the file selector?
I read in the FAQ that the selector must be clicked to open the file, i hope this doesn't mean there is no way to hook into it.
I have a button in my template that i would like to wire up to trigger the clicking of the template area.
Here's what my template looks like:
<UplevelSelectorTemplate>
<table>
<tr>
<td><%= Web.SelectTheBrowseButtonToChooseAFile.HtmlEncode%></td>
<td><input type="button" value="<%= Web.Browse.HtmlEncode%>" class="GreenButton" id="ChangeUserPhotoControlBrowseButton" /></td>
</tr>
<tr>
<td colspan="2"><%=Web.OnlyCertainTypesAreAllowedMaxFileSize.HtmlEncode%></td>
</tr>
</table>
</UplevelSelectorTemplate>
currently if they mouse click anywhere on there, it'll open up the file selector, but if they are tabbing through and "click" the button with the enter key, nothing happens. I need to bubble that click up to whatever element it is that is initiating the file selector.
I hope this makes sense, thanks very much.
|
|
|
Rank: Administration
Groups: Administrators
Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ
|
Unfortunately, there is no cross browser way to trigger the file selection dialog except by an actual user mouse click. This is because of browser security concerns -- most browsers don't allow javascript to trigger the file selection dialog, only an actual user click works. The way SlickUpload does its uplevel skin, it hovers an invisible file input above the selection area, so that the file input is actualy what is clicked.
It looks like you're using SlickUpload 5. SlickUpload 6 adds support for tabbing into the file input and triggering the file selection dialog with the enter key. However, this only works in browsers that support it (Firefox 2+ and Safari/Chrome 4+).
The other option is to remove the UplevelSelectorTemplate section entirely. This will switch SlickUpload into downlevel mode, which uses normal file input controls, allowing the user to interact with them in native form. If you want maximum accessibility, this is the way to go.
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 10/12/2010
Posts: 31
|
Thanks for the speedy Reply!
I was wondering how it was done! how sneaky!
What would the id of that invisible file input be? If i could get that id, i could use jQuery to trigger a click on it, and that would open up the file selector. I've just tested this in IE 9 using the developer tools, and FF using firebug, and it works ok.
We are looking into upgrading to 6.0 in the future, but i'm hoping for something that will work in the mean time.
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 10/12/2010
Posts: 31
|
I've discovered the ID of the hidden file input is 1_IDOFSLICKUPLOADCONTROL_fileSelector_html_file0, at first anyway, the 0 incriments sometimes, if you try to open a bad file, or pick a file and then delete it, and perhaps other occasions as well.
the file selectors name is the same.
i think i can make a selector that will target the id starting with 1_IDOFSLICKUPLOADCONTROL_fileSelector_html_file and go from there.
I'll update this if it works :)
|
|
|
Rank: Administration
Groups: Administrators
Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ
|
You should also be able to do something like "#IDOFSLICKUPLOADCONTROL input[type=file]:last". Keep in mind that this isn't supported, and won't work in a good chunk of older browsers. Sometimes it will appear to work (i.e. the file selection dialog will pop up), but the browser won't actually properly upload the file.
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 10/12/2010
Posts: 31
|
it's working great in firefox, but IE is throwing an "Access Denied" Error on the form.submit() in the slick upload code.
looks like IE dis-allows even firing the click event on a file control. i knew it dis-allowed changing their content, but firing the click? that's just crazy.
back to the drawing board!
|
|
|
|
Guest |