Prevent file input from changing with Javascript (JQuery)

Question

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?

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
– 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
– 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
– adeneo, Commented Aug 29, 2017 at 16:32

Prashant Pimpale · Accepted Answer · 2018-12-13 11:23:17Z

7

If you want to reset the file input:

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

edited Dec 13, 2018 at 11:23

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Aug 29, 2017 at 17:01

Kannan K

4,4891 gold badge15 silver badges27 bronze badges

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

Comments

Vikas Gupta · Accepted Answer · 2017-08-29 16:33:53Z

0

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

answered Aug 29, 2017 at 16:33

Vikas Gupta

1,2311 gold badge12 silver badges27 bronze badges

Comments

Noel Swanson · Accepted Answer · 2018-10-01 19:04:39Z

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);
      }
      

	});	
});

Collectives™ on Stack Overflow

Prevent file input from changing with Javascript (JQuery)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related