I'm trying to prevent a file input being changed if I conditionally tell the user the file is too large, but even capturing the change and preventing default, it's still filled in ie:

  // CHECK FILE ISNT ABOVE 500MB ON CHANGE
      $(".upload-file").change(function (e) {

        // conditional checks
        var fileSize = $('.upload-file').get(0).files[0].size; // in bytes

        if (fileSize > 500000000) {
          e.preventDefault();
          swal('File size is more than 500 MB, please upload a smaller file. Support for larger files will be rolled out soon.');
          return false;
        }

  

      });

Here's my code, what am I doing wrong?

I'm trying to prevent a file input being changed if I conditionally tell the user the file is too large, but even capturing the change and preventing default, it's still filled in ie:

  // CHECK FILE ISNT ABOVE 500MB ON CHANGE
      $(".upload-file").change(function (e) {

        // conditional checks
        var fileSize = $('.upload-file').get(0).files[0].size; // in bytes

        if (fileSize > 500000000) {
          e.preventDefault();
          swal('File size is more than 500 MB, please upload a smaller file. Support for larger files will be rolled out soon.');
          return false;
        }

  

      });

Here's my code, what am I doing wrong?

• javascript
• jquery
• html
• input

Share Improve this question Follow edited Jul 11, 2020 at 17:35 Anthony asked Aug 29, 2017 at 16:30 AnthonyAnthony 14.3k1414 gold badges6565 silver badges8686 bronze badges 3

• You cannot achieve what you require in this manner. The file has already been selected before the change event fires. You need to amend your logic to prevent the form firing a submit event if an invalid file is chosen. – Rory McCrossan Commented Aug 29, 2017 at 16:32
• Prevent the submission of the file. You can't stop the addition of a file after it has been added... – evolutionxbox Commented Aug 29, 2017 at 16:32
• Why, everything happens on the clientside, by the time you've checked the filesize, the file is already added in the input. You should prevent the file from being uploaded, but there's really no need to prevent the user from adding the file in the browser – adeneo Commented Aug 29, 2017 at 16:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

If you want to reset the file input:

$(".upload-file").val(null);

I would suggest to reset the input type=file if the condition doesn't match as below:

$('.upload-file').on("change", function (e) {
    if (this.files[0] != null) {
        var fileSize = this.files[0].size;
        if (fileSize > 50) {
            alert("File too large!");
            var control=$("#"+$(this).attr('id'));//get the id
            control.replaceWith(control = control.clone().val(''));//replace with clone
            return;
        }
        else {
            alert("File ok");
        }
    }
});

Also do note that this.files[0].size returns file size in bytes. So according to your validation, you will not allow to upload file whose size is more that 50 bytes

The code below will check the file size, if it is above your threshold (maxFileSize ), then it will throw an error and reset the file upload dialogue. This prevents any further processing of the file, for example if you are manipulating the file in some way before submitting the form.

$(document).ready(function() {
	$('.upload-file').on('change', function(e) {
     try {
     var fileSize = 0;
	 var maxFileSize = 5 // in mb
      fileSize = $('.upload-file')[0].files[0].size //size in kb
      fileSize = fileSize / 1048576; //size in mb 
 
      if (fileSize > maxFileSize) throw "Too big";
      }
      catch (e) {
      alert("Sorry, file is too large. Please select one that is smaller than "+maxFileSize +' Mb');
	  $('.upload-file').val(null);
      }
      

	});	
});