HTML <input type='file'> apply a filter

Question

now when i will click the browse button, the browse dialog will show all files... what if i want to f

Answer 1

You could use JavaScript. Take in consideration that the big problem with doing this with JavaScript is to reset the input file. Well, this restricts to only JPG (for other formats you will have to change the mime type and the magic number):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Take in consideration that this was tested on latest versions of Firefox and Chrome, and on IExplore 10.

For a complete list of mime types see Wikipedia.

For a complete list of magic number see Wikipedia.

Answer 2

You should use one of the plugins that use embeded Flash, since you can't do it with plain javascript

Answer 3

I think u are looking for the accept parameter. Try this works

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

Answer 4

I have made an easy way for client side validation for most cases on file filtering. It is actually quite simple. Now, before you go and try to implement this, understand that the server MUST check this file, because the javascript and HTML filtering is not a sure thing in cases where someone alters the .js, or even the HTML. I'm not including all of the actual script for the simple fact that I enjoy seeing other implement the concepts using a creative mind, but these are the steps I've taken that seem to work until I find a better answer:

Create a js object that finds the input and handles it.

Call a function, such as the OnClientUploadComplete for the AjaxControlToolKit's AsyncFileUpload control.

Inside of this function, declare a boolean variable: bIsAccepted(set to false) and string sFileName(after getting the filename from the args).

In an if..else Statement,

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

then

if(bIsAccepted)
{
//Process Data
}

On the server, setting up a list of accepted file extensions and looping through and processing similarly will make the process cohesive and consistent, effectively allowing the UI and Code-Behind to filter the file types in almost every situation.

Given that this can be bypassed by changing the name to have a different file extension as part of the name, the mime type should also be checked before submitting to the server for further processing.

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

Hope this helps!

Answer 5

You can't control which files can be selected, but you can read the filename with javascript after the file is chosen. You could then display a warning and/or disable the submit button if the file is the wrong type. However, remember that you can't rely on the extension to tell you whether or not the file is really of the right type. It should only be treated as a way to help users who might otherwise waste time uploading a huge file before discovering that you don't support that file type.

Here's some example code to do that. It uses jQuery, but you could do the same in plain javascript too.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});

Answer 6

It should use MIME_type: For example

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

this will only accept *.xlsx file type...

For the list of mime types, check the link below:
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/