How to enforce file size limit in jquery.fileupload

Question

I'm using jquery.fileupload() to upload files from a browser to a Node.js server, which parses the files with the "multiparty" npm. I need to enforce a size limit on each file, and also on total size of all the files being uploaded in one request.

The "multiparty" npm allows me to do the latter, but not the former. And even for the latter, the limit isn't enforced until the browser uploads enough data to hit the limit. So the user can wait a long time only to get an error message.

I'd like to enforce the limit on the client-side. I've searched the Internet for solutions, but none of them seem to work. They may have worked in the past, but not with the newest version of Chrome.

I've found that I can determine that the files are too big by watching for a "change" event on the file-input element, like this:

$('#file-input-id').on('change', function() {
    console.log(this.files);
});

When this event triggers, this.files contains an array of selected files, including the name and size of each. So I can determine that the caps have been exceeded, and I can alert the user. But I don't know how to stop the files from uploading anyway. Various source on the Internet suggest that I can do this by returning false or manipulating this.files. But none of this seems to work.

I'm testing this against the latest version of Chrome (66.0.3359.139), but I'd like a solution that works with any modern browser.

Answer 1

The file object that exists on the element has a size property which you can use to compare and make validations on the client. I wrote an example in javascript. I know you want it in JQuery but, that was kind of already answered here

Anyways, this is what I came up with ...

var inputElement = document.getElementById("file")

inputElement.addEventListener('change', function(){
  var fileLimit = 100; // could be whatever you want 
  var files = inputElement.files;
  var fileSize = files[0].size; //inputElement.files is always an array
  var fileSizeInKB = (fileSize/1024); // this would be in kilobytes defaults to bytes

  if(fileSizeInKB < fileLimit){
   console.log("file go for launch")
    // add file to server here
  } else {
    console.log("file too big")
    // do not pass go, do not add to server. Pass error to user    
    document.getElementById("error").innerHTML = "your file is over 100 KB "
  }
})

(CodePen https://codepen.io/HappinessFactory/pen/yjggbq )

Hope that answers your question. Good luck!

Answer 2

Thanks! I'm sure your answer would work if I weren't using jquery.fileupload(), but jquery.fileupload() starts the upload automatically. So there's no "add file to server" logic to perform/skip.

But your answer sent me off in the right direction. For anyone else stuck on this: The trick is to use the "start" or "submit" properties of the "options" object passed into jquery.fileupload(). Both of these are functions, and if either one returns false, the upload is cancelled.