file input - prevent selection of certain types of files and size

Question

Is there a way to prevent the user from selecting a file that is not a specified file type when they browser for the file on their computer? For example, when a user browseses to upload an image file I would for them to only see images (jpg, png, ect.) that are less than 20mb. Is this something that can be accomplished with asp.net mvc and jquery or do I need to use flash or a java applet?

Answer 1

The only way to exert any control over file selection is to use a flash based uploader. Depending on your circumstances the effort may be well worth it.

I recommend SWFUpload. I have found the implementation to be the more robust of the alternatives such as Uploadify and dev support and responsiveness is all around better.

Good luck.

Answer 2

According to http://www.cs.tut.fi/~jkorpela/forms/file.html#filter, although there is support in the input tag to give the browser a hint for the type of file you want to upload in the form of the accept attribute, very few if any browsers actually pay attention to this attribute when presenting the upload dialog. It's sad, because this attribute's been around for quite a while.

I agree with Sky Sanders on this one. Use a flash uploader if you want to provide a file filter.

Answer 3

Try Plupload: http://plupload.com/

It supports advanced uploading with Flash, Silverlight, HTML5, Gears and more depending on whats available client side. HTML5 browsers don't yet support the file filters but according to the site they should in future.

Answer 4

You can apply to after-selection solution.

var myFiles = document.getElementById('myFileInput');
for(xi=0;xi<myFiles.files.length;xi++)
{
controlThat(myFiles.files[xi].fileName,myFiles.files[xi].mediaType);
}

At the controlThat function you can check and select which type of file you wish to proceed or alert your notifications.