How to get total file size of multiple files upload using jquery

Question

I have a form where users can upload multiple files.

But I only want to allow them to do so when the combined size of all files does not exceed 3GB. How can I do this?

Here is my current code:

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) {
    var fileSize = (files[i].size / 1024 / 1024).toFixed(2);
    if (files[i].size > 3204448256) {
      // $("#input-file-1").html(file_names);
      alert("You have exceeded maximum allowed size 3GB")
      return true;
    }

    $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' (' + fileSize + ' MB)</div>' + '<p class="close" >X</p></span>');
  }
  fileCount += files.length;
  showFileCount();
});

.filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

Same code, in JSFiddle

I have a form where users can upload multiple files.

But I only want to allow them to do so when the combined size of all files does not exceed 3GB. How can I do this?

Possible duplicate of [Validate file extension and size before submitting form](https://stackoverflow.com/questions/33096591/validate-file-extension-and-size-before-submitting-form) — Maximilian Burszley, Apr 13 '18 at 19:03
@TheIncorrigible this is not a duplicate. He's asking how to check whether the **combined** size of all files exceeds 3GB — blex, Apr 13 '18 at 19:04
@blex, thanks for understanding my question., I have added my code in fiddle to check — Test, Apr 13 '18 at 19:06
@blex, can you pls guide me what is best title for this question, i am not good at english — Test, Apr 13 '18 at 19:12
@Test Your code seems to be working as expected. What is your problem? — blex, Apr 13 '18 at 19:38
@blex, if the all files size more than 3gb not to allow to upload file and show alert — Test, Apr 13 '18 at 19:41

score 3 · Answer 1 · answered Apr 13 '18 at 20:25

Something like this will get you close.

To determine the total uploaded filesize you will need to first loop over the files and sum all of the individual file sizes. Then after you have the total file size from the upload, convert to GB for comparison and check if it is > 3GB. If it is, print the alert and return to prevent the file uploads.

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  var totalSize = 0;

  for (var i = 0; i < files.length; i++) {
    // calculate total size of all files        
    totalSize += files[i].size;
  }
  //1x10^9 = 1 GB
  var sizeInGb = totalSize / 1000000000;
  if(sizeInGb > 3){
    alert("You have exceeded the maximum file upload size.");
    return false;
  }
  for (var i = 0; i < files.length; i++) {
   var fileSize = (files[i].size / 1024 / 1024).toFixed(2);

    $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' (' + fileSize + ' MB)</div>' + '<p class="close" >X</p></span>');
    
  }
  fileCount += files.length;
  showFileCount();
});

.filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

thanks for your answer, Here you are allowing user all files are more than 3GB, you are not allowing the user if one file size is more than 3GB — Test, Apr 13 '18 at 20:33
That is not true, if one of the files is > 3GB than the total file size would also be > 3GB and the method would return preventing the uploads from happening. — Robert Fines, Apr 13 '18 at 20:43

How to get total file size of multiple files upload using jquery

1 Answers1