Restrict File Types In File Upload Dialog

Question

I am building an application in HTML5 and I need a file uploader that is able to filter the various files.

Say I got a folder with 1000 files and 5 of those have the .xls format. I want the upload window to filter those files once that file type is selected in the upload window its MIME type chooser.

I know that HTML5 has a way to do this with <input type=file accept=jpg/images> but due to its lack of support (none in IE and Safari) it is just not an option.

I have been looking around the web and found a jQuery file uploader but from what I can see, it is only able to check for file types once you hit the upload button which does not help filter the files available.

Is there any way to do this using Flash or HTML5 technology?

Answer 1

If you want to use accept attribute you should set there correct mime types: accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff" That is for images. But it does not work in IE and some problems could be with FF (people say that it supports only a part of mime types)

For similar task I'm using SWFUpload. You can specify a list of allowed files there and it will show only those files in open file dialog. Here you can see its demos

Upd: as mentioned by @Nis, demos are now included into source package:

We have provided several simple demos to show how SWFUpload works. These demos are not intended as project templates but as demonstrations of basic features and methods for implementing SWFUpload. They are included in the source package.