FIle Upload Madness
I just went through a ton of frustration with the file upload UI for Instructables. Here are some notes on working dynamically with forms, file inputs, and iframes:
- Of IE, Firefox, and Safari, Safari seems to be “strictest” about enforcing security around file inputs. Granted, allowing script access to the value of file inputs might present a security risk to user, but Safari goes too far: even copying an unmodified file input from one form to another invalidates it. My code was failing silently for a while before I figured this one out.
- Safari also requires that the file inputs be visible for their values to be sent. No
display:nonefor you. - There are also crazy quirks in Safari around sending the request through an
iframe. Various combinations ofiframevisibility and/or dimensions may screw the pooch. - Safari is also picky about the iframe existing before you set it as the target of a form, when you’re creating both, dynamically. IE and Firefox are lazily content to pick up the reference at submission time.
- Need to set the encoding type for a form? Prototype will take care of you, but if you need to do it yourself, remember that IE uses the
encodingproperty instead of the usualenctype. - Nested forms are a no-no. This goes without saying, but some browsers will let you get by with this one, so you have to be on the lookout.
[Update]: Here’s another:
- A recent IE security update causes “Access is denied” errors when submitting certain forms (it was on ours.) Some folks suggested that we use an onsubmit method on the form and have the user press a submit button rather than doing a pure form.submit() in script. However, clearing our browser settings did the trick. If this becomes a common bug amongst our users, we may have to implement the former fix.
