JQuery File Upload Size and Type Restriction

Question

I have a JQuery multi-file upload solution that requires restriction on file format and size.

Here's the JSFIDDLE, and the JS code follows below:

$(document).ready(function() {
  if (window.File && window.FileList && 
window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function() {
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

$(document).on('click', '[name=Reset]', function(){
   $('.pip').remove();
})

The desired outcome is to allow me to set both the file type and size that can be easily changed.

Thanks for any help!

JMoura · Accepted Answer · 2018-10-26 22:50:23Z

1

You can set a condition right after you declare a value to your var f

if(f.size > 200000 || f.type !="image/png"){
   alert("File too big or not a valid Type");
   $("#files").val("");
}

You can also console.log(f); for more properties

Here is my version of your function:

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(e) {
            var files = e.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i];
                if(f.size > 200000 || f.type !="image/png"){
                    alert("File too big or not a valid Type");
                    $("#files").val("");
                }
                else{
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<span class=\"pip\">" +
                            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                            "<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
                            "</span>").insertAfter("#files");
                        $(".remove").click(function() {
                            $(this).parent(".pip").remove();
                        });

                    });
                    fileReader.readAsDataURL(f);
                }
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }
});

$(document).on('click', '[name=Reset]', function(){
    $('.pip').remove();
})

answered Oct 26, 2018 at 22:50

JMoura

7895 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marcelo Martins Over a year ago

I'm sorry for my ignorance, but what would the be the syntax for adding more than one file type besides .png? Would it be just the following? if(f.size > 200000 || f.type !="image/png,jpg,pdf,doc,xls"){

Marcelo Martins Over a year ago

I've just added the additional file extensions, but realized that it now requires a message that notifies that the files that are not whitelisted cannot be uploaded. How do I trigger an file type error message?

JMoura Over a year ago

You might trigger the message by concatenating string with file type variable. Something like this: alert("This file type: "+file.type+" is not allowed");

Marcelo Martins Over a year ago

I'm not very fluent with javascript. Could you show me how to implement your suggestion on a jsfiddle?

Unmitigated · Accepted Answer · 2018-11-01 21:49:52Z

1

You can check the size property of the file and the type property of the file.

var maxSize = 20000;//maximum size for the file
var acceptedTypes = ["image/png", "image/jpg"];//accepted image types
if(f.size>maxSize){
    //file is too big
}
if(acceptedTypes.indexOf(f.type)<0){
   //file type is not accepted
}

JSFiddle: https://jsfiddle.net/ordmsw8p/

edited Nov 1, 2018 at 21:49

answered Oct 26, 2018 at 23:19

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

1 Comment

Marcelo Martins Over a year ago

I would not know how to implement your suggestion. Can you share in on a jsfiddle? I also need the option to upload .docx and .xlsx files.

Collectives™ on Stack Overflow

JQuery File Upload Size and Type Restriction

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related