Filter files in HTML file open dialog

Question

I am working with file upload to the server using HTML tag:

<input type="file">

When I click on the browse button it shows me a file open dialog. Can I filter the files by passing the extension filter to that dialog? Like we can do in .Net framework's file open dialog by passing some thing like:

Text files *.txt|.txt

Using this filter we can only open .txt files. Other files not shown to the user. Is there any option for this dialog?

Answer 1

Standard

Actually in HTML5 you can set the accept attribute so now this is possible! The W3C standard states:

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

Accepted values [Full list in Wikipedia]

Just pass a valid MIME type to the attribute for example:

• audio/*
• video/*
  • video/ogg
• image/*
  • image/jpg
  • image/bmp

Example code

<input type="file" accept="image/*">

Answer 2

my question is, can i filter the files by passing the extension filter to that dialog?

No you can't do this with the plain type="file" input. You could use some Flash upload controls though that allow you to achieve this.

Answer 3

Here is a piece of code that I came up with when I was in need of filtering some of the file types:

<input type="file" accept=".xls, .xlsx, .csv" placeholder="File to be upload" />

Accept attribute supports multiple files comma separated.

Answer 4

I don't think you can edit this dialog options, but you can validate the file after the user select it.

tO edit the dialog, I remember that you can do that by a flash or Silverlight uploaders, such as swfUpload.