How to display 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 + 'Total file size :'+totalSize);
};

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);
    totalSize = totalSize + files[i].size;

if(totalSize > 3204448256){

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

css Code

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

My javascript code

<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

Here is my working fiddle code

https://fiddle.jshell.net/vijayak7803/4ny3qna6/11/

Answer 1

It's a simple demo showing how to calculate all the files' size that being selected and waiting for upload.

Put the files in an array since selecting files via $('#uploadFile') would cause the previous files be gone.

Note: If you don't want to upload the same file multiple times, you need to check if the file already exists in Files before push().

Then, loop through all the files and calculate the sum.

var Files = [];

$('#uploadFile').on('change', function() {
  console.log(this.files)
  $.each(this.files, (i, file) => Files.push(file))
  calculateTotalSize()
})

function calculateTotalSize() {
  var totalSize = 0;
  Files.map((file) => totalSize += file.size)
  $('#file_count').text(`Total size: ${totalSize}`)
}

.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>