restrict file upload selection to specific types

html file-upload fileapi
ndmweb picture ndmweb · Sep 27, 2011 · Viewed 44.5k times · Source

Anyway to restrict the selection of file types via the <input type="file" /> element?

For instance, if I wanted only images types to be uploaded, I would restrict the possible selections to (image/jpg,image/gif,image/png), and the selection dialog would grey out files of other mime types.

p.s. I know that I can do this after the fact with the File API by scanning the .type attributes. I'm really trying to restrict this before hand.. I also know I can do this via flash, but I do NOT want to have use flash for this.

Answer

amosrivera picture amosrivera · Sep 27, 2011

There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

If you don't have access to the backend have a look at a flash based solution like SWFUpload.

See more on this here: File input 'accept' attribute - is it useful?

Related questions

Remember and Repopulate File Input

Note: The answer(s) below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element via JavaScript in 2017. See the answer in this question for details as well as a demo:…

Read More
File field - Append file list

I have made me a simple file field: <input type="file" name="pictures_array[]" multiple accept="image/*" id="page_pictures_array" /> and some HTML5 File API code to list the files: $('.page-form #page_pictures_array').change(function(…

Read More
HTML5 File API - slicing or not?

There are some nice examples about file uploading at HTML5 Rocks but there are something that isn't clear enough for me. As far as i see, the example code about file slicing is getting a specific part from file then …

Read More