I have a page where a user can upload a document. There is also a button to add more documents (as seen per image).
I want to check as each file that has been added or removed from the upload section to make sure that the size does not exceed 10 MB.
So if a user uploads 3 separate files of 2 MB and then adds a file which is 5 MB, the submit button will disable until one of the files are removed because it has gone over the 10 MB limit.
The rows can be added dynamically, so I was doing it by class and trying to sum the running total.
Here is what I have so far, available at JFIDDLE
<form class="upload-form">
<input class='upload-file' type="file" id="upload0">
<input class='upload-file' type="file" id="upload1">
<input class='upload-file' type="file" id="upload2">
<input class='upload-file' type="file" id="upload3">
<input id='submitBtn' type=submit>
</form>
The issue is, that if I add a file and then remove it, it does not reflect the current running total.
$("document").ready(function() {
var fileArr = [];
$(".upload-file").on('change',function() {
var fileInput = $('.upload-file');
var fileSize = fileInput.get(0).files[0].size;
fileArr.push(fileSize);
var totalSize = 0;
for (var i in fileArr) {
alert(fileArr[i]);
totalSize = totalSize + fileArr[i];
}
if (totalSize > 10485759) {
alert('Over Max Size');
$(submitBtn).prop("disabled",true);
}
});
});
I tried this way also, but could not reset when a file was removed.JFIDDLE-2
I have a page where a user can upload a document. There is also a button to add more documents (as seen per image).
I want to check as each file that has been added or removed from the upload section to make sure that the size does not exceed 10 MB.
So if a user uploads 3 separate files of 2 MB and then adds a file which is 5 MB, the submit button will disable until one of the files are removed because it has gone over the 10 MB limit.
The rows can be added dynamically, so I was doing it by class and trying to sum the running total.
Here is what I have so far, available at JFIDDLE
<form class="upload-form">
<input class='upload-file' type="file" id="upload0">
<input class='upload-file' type="file" id="upload1">
<input class='upload-file' type="file" id="upload2">
<input class='upload-file' type="file" id="upload3">
<input id='submitBtn' type=submit>
</form>
The issue is, that if I add a file and then remove it, it does not reflect the current running total.
$("document").ready(function() {
var fileArr = [];
$(".upload-file").on('change',function() {
var fileInput = $('.upload-file');
var fileSize = fileInput.get(0).files[0].size;
fileArr.push(fileSize);
var totalSize = 0;
for (var i in fileArr) {
alert(fileArr[i]);
totalSize = totalSize + fileArr[i];
}
if (totalSize > 10485759) {
alert('Over Max Size');
$(submitBtn).prop("disabled",true);
}
});
});
I tried this way also, but could not reset when a file was removed.JFIDDLE-2
The logic in your code can be simplified by just incrementing a single counter within the each() loop. You can then check the total once the loop has pleted to see if the bined file size is valid. Try this:
$(".upload-file").on('change', function() {
var totalSize = 0;
$(".upload-file").each(function() {
for (var i = 0; i < this.files.length; i++) {
totalSize += this.files[i].size;
}
});
var valid = totalSize <= 10485759;
if (!valid)
alert('Over Max Size');
$("#submitBtn").prop("disabled", !valid);
});
Note that this method will also work with multiple file inputs, as the jsFiddle below shows:
Updated fiddle
Here's a fiddle of it working http://jsfiddle/9bhcB/1214/
Change your javascript to be:
$("document").ready(function(){
$(".upload-file").on('change',function() {
var fileArr = [];
$.each($(".upload-file"), function(index, value) {
input = value;
file = input.files[0];
fileArr.push(file.size);
var totalSize = 0;
for (var i in fileArr) {
totalSize = totalSize + fileArr[i];
}
if (totalSize > 10485759) {
alert('Over Max Size');
$("#submitBtn").prop("disabled",true);
}
else {
$("#submitBtn").prop("disabled",false);
}
});
});
});
Couple of things looking at your fiddle -
Here is how you get the ID of the element "changed" -
var elmId = $( this ).attr('id');
and you use this to track the file sizes.
I forked your fiddle to make this work. Here you go - http://jsfiddle/9bhcB/1226/
Also, there is a lot of quick and dirty JS in there that you may need to clean up, but it does what you are looking for!
Good luck!
An alternative solution to your code would be one input that allows for multiple files to be uploaded at once. The collection of files can then be slice-d up and totaled with a smaller function:
$(function() {
$('#file').on('change', function() {
var total = [].slice.call(this.files).map(function(x) {
return x.size || x.fileSize;
}).reduce(function(a, b) {
return a + b;
}, 0);
if (total > 10485759) {
alert('Over Max Size');
$('#submitBtn').prop("disabled", true);
} else {
$('#submitBtn').prop("disabled", false);
}
$('#total').html('Total: ' + total + ' bytes');
})
})#total {
padding: 50px;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" multiple="multiple" />
<button id="submitBtn">Submit Files</button>
<div id="total"></div>Ran into a similar issue on a form we use. Server upload limit is 28 mgs and the form wasn't providing enough user feedback when too many images were selected. The answers here didn't work for me, the alert was only counting the first file selected. I modified the code to this with better results for our use case.
$("#UploadFiles").on('click',function() {
const fileInput = document.getElementById("userfiles");
const selectedFiles = fileInput.files;
for (let i = 0; i < selectedFiles.length; i++) {
file = selectedFiles[i];
console.log(file.name + ' ' + file.size);
totalSize = totalSize + file.size;
}
console.log('second pass '+ totalSize );
if (totalSize > 28000000) {
$("#FileUploadResults").html('Over Max Upload Size '+ totalSize);
$("#UploadFiles").prop("disabled",true);
} else {
$("#FileUploadResults").html('Files selected '+ totalSize);
$("#UploadFiles").prop("disabled",false);
}
});