html5 accept attribute for form file uploads problem

HTML & CSS
1

I use the following code to try to get a browser make the OS only display certain file types when a user browses to upload a file.


<input type="file" name="upload" id="upload" accept="image/jpeg, image/png">

But I tried this in Firefox 9 but it doesn’t work. It also doesn’t work in IE, but it’s not supported there yet. Is my syntax wrong? Or does Firefox 9 just not support this?

w3schools says it should work in firefox and others (http://www.w3schools.com/TAGS/att_input_accept.asp)

2

Yeah, this seems a pretty buggy/flaky attribute right now. You certainly can’t rely on anything in HTML5 yeat, as it’s still in production and browsers haven’t truly embraced it yet. Better to leave it to PHP or similar to do this.

3

http://wufoo.com/html5/attributes/07-accept.html

4

Thanks both of you.

Also, that wufoo site is very cool. Thanks for linking it.

5

Yes, Chris Coyier is involved in WooFoo. Seems a good service.

Have you tried just using accept="image/*"? That seems to work well to me.

6

Welcome to another reason real world use of HTML 5 is a decade off – even the useful **** doesn’t work right.

Fun to play with though… just don’t use it on production work if you actually care about people using the site.

7

I’ve haven’t tried image/*. I will try that. When you said "Better to leave it to PHP or similar to do this. " what did you have in mind? I didn’t know php was capable of controlling the file upload dialog. I already use php to verify the file on the backend, but I was hoping this front end would make it just a little easier for the user to find a file.

8

And you are probably right. I guess the advantage of the HTML attribute is that it stops people choosing the wrong file type, while PHP will only kick up a fuss afterwards. You could probably do the same thing with JavaScript, though. Or just post a note next to the form telling people what file types are acceptable. :slight_smile: