CODEWITHSUNDEEP
javascripthtmlfileopendialog
Aatif Farooq
Aatif Farooq

Reputation: 1846

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?

Upvotes: 2

Views: 4217

Answers (4)

Gabriel Marius Popescu
Gabriel Marius Popescu

Reputation: 2186

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.

Upvotes: 1

totymedli
totymedli

Reputation: 31106

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/*">

Upvotes: 4

Amr Elgarhy
Amr Elgarhy

Reputation: 69002

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.

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1039160

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.

Upvotes: 2

Related Questions