home / blog / podcasts / videos / notes / photos / about / more

Accept on HTML file upload

Useful attribute on input tag

Posted by Jeena

This is interesting, and I didn't know about it but you can specify what mime types of files you're accepting in a <input type="file"> tag. And it even has impact in browsers. So I know that I only want to allow images, and not videos for example, I did this:

<input type="file" accept="image/jpg,image/jpeg,image/gif,image/png">

It seems to be implemented a bit different in many browsers. For example, Firefox on Android doesn't show the Camcorder app if you add only image mime types. Sadly chrome on Android doesn't understand it and just ignores this attribute. Oddly enough, on OS X it is exactly the other way around. Firefox ignores this attribute and lets you choose what ever file you want, Chrome on the other side only lets you choose images.

I found it while implementing my new Photo sharing thingy on my own website, I will use it instead of Instagram because it pushes the photos also to Twitter and Facebook (and in the future perhaps even to Flickr). What I wondered was if I could have a simple flow to upload pictures to my websites kind of like I used Instagram until now.

I did a little test with my three smartphones I have here, I wanted to know which data they add to the EXIF fields in the JPEG picture you upload. Firefox OS adds the camera model (mine was QCAM-AA), the iPhone doesn't add any thing at all, but my main phone, a Nexus 5 with Android adds the most like geo data, exposure time, aperture, etc. Obviously my NIKON adds the most, but I can't post from it on the go.

So even if not all the browsers respect the attribute I find it really useful for those which do.

1 Reply

,

Known uses this for its photo feature, and will do so for audio, too. I'm actually surprised that Chrome respects this on the desktop now - I think that's a first. On mobile it's fairly reliable though.

2 Mentions

Have you written a response? Let me know the URL:

There's also indie comments (webmentions) support.