javascripthtmlfileopendialog

Filter files in HTML file open dialog

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?

Solution

  • 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:

    Example code

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