using code of file upload max size event into simple code

Question

I am new to jquery/javascript now i have a form in which user can upload multiple files which is working just fine but i need to do alterations to it this is the working code.

$('#userFiles').change(function() {
  var combinedSize = 0;
  for (var i = 0; i < this.files.length; i++) {
    combinedSize += (this.files[i].size || this.files[i].fileSize);
  }
  if (combinedSize > 104857600) {
    toastr["error"]("Max upload size is 100MB");
  }
});

HTML

<input type="file" class="form-control" id="userFiles" name="userFiles[]" multiple/>

Now what i want to do is before submitting the check whther the collective files sizes are more than 100 if yes then stop the form from submitting and display an error that you cannot upload more than 100MB now this is the updated code.

$("form").on("submit", function(e) {
  e.preventDefault();

  $('#userFiles').change(function() {
    var combinedSize = 0;
    for (var i = 0; i < this.files.length; i++) {
      combinedSize += (this.files[i].size || this.files[i].fileSize);
    }
    if (combinedSize > 104857600) {
      toastr["error"]("Max upload size is 100MB");
    }
  });
});

My issue is that it using this function because it is an event for input change when it comes to form submit i cannot use another event inside it i want the logic to work only on form submit how can i replace this with the userFile id attribute? i tried couple of ways but it is not working.

You should avoid creating event handlers inside other event handlers. It's a great way of creating duplicate bindings which will often drive you into issues. — Taplar
– Taplar, Commented Nov 10, 2017 at 21:54
yes that is exactly what i am trying the loop actually uses this variable due to event how can i pass the input type file instead of this? — uneeb meer
– uneeb meer, Commented Nov 10, 2017 at 21:55
<input type="file" class="form-control" id="userFiles" name="userFiles[]" multiple/> — uneeb meer
– uneeb meer, Commented Nov 10, 2017 at 21:58
Add that to your question, not as a comment. Further question. Why create a change binding in the submit handler at all? Why not just grab the files and do your check? — Taplar
– Taplar, Commented Nov 10, 2017 at 21:59
the input type that is actually uploading the file of whom i want to validate that if the size of all files are greater than 100 than error should be displayed — uneeb meer
– uneeb meer, Commented Nov 10, 2017 at 21:59

Taplar · Accepted Answer · 2017-11-10 22:14:22Z

1

function validateMaxFileSize() {
  //get the files off of the element
  var files = $('#userFiles').prop('files');
  var combinedSize = 0;

  for (var i = 0; i < files.length; i++) {
    combinedSize += (files[i].size || files[i].fileSize);
  }
  //return true if the max is exceeded
  return (combinedSize > 104857600);
}

$('#userFiles').change(function() {
  //if the max is exceeded, show toaster
  if (validateMaxFileSize()) {
    toastr["error"]("Max upload size is 100MB");
  }
});

$("form").on("submit", function(e) {
  //if the max is exceeded, cancel the submit
  if (validateMaxFileSize()) {
    e.preventDefault();
    toastr["error"]("Max upload size is 100MB");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="form-control" id="userFiles" name="userFiles[]" multiple/>

answered Nov 10, 2017 at 22:14

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

2 Comments

Taplar Over a year ago

You should also perform the file size check on the server side, as users can always break your javascript. @uneebmeer

uneeb meer Over a year ago

yes the php part is already working in the backend i just thought it would be nice to stop certain user on the client side to save additional load on server :)

Harry · Accepted Answer · 2017-11-10 22:20:54Z

1

If I understand correctly you can use a global variable to do this. e.g.

var combinedSize = 0;

$('#userFiles').change(function() {
    combinedSize = 0;
    for (var i = 0; i < this.files.length; i++) {
      combinedSize += (this.files[i].size || this.files[i].fileSize);
    }

  });

$("form").on("submit", function(e) {


   if (combinedSize > 104857600){
    e.preventDefault();
    toastr["error"]("Max upload size is 100MB");
   }

});

remember that this is only client side validation and it is not sufficient! what happens if the users broswer has javascript disabled? The form will still submit and the file will go through. You need to do server side validation to ensure that they do not exceed the file limit. You can set values in a configuration file for maximum file request size . You can use the web.config if you have an asp.net app. You can also check in the server code whether the file size is to big and return a validation message.

answered Nov 10, 2017 at 22:20

Harry

4,0602 gold badges16 silver badges33 bronze badges

1 Comment

uneeb meer Over a year ago

dully noted..:)

Collectives™ on Stack Overflow

using code of file upload max size event into simple code

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related