uploading multiple files restriction is not working using dropzone

Question

I have the code given below it is counting the files when i select the files and alert that you cannot select more than etc...

Limit is 4 and when i select 6 it says cannot select more than 4. But when i select 4 it adds and show thumb anad again on selecting one or 4 it adds again the new 4 or whatever files, so user can upload unlimited files.

How can i catch that selected files and restrict them.

<div class="m-form__group form-group row">
    <label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">
    Select Image
    </label>
    <div class="col-lg-9 col-md-9 col-sm-12">
        <div class="col-lg-12 col-md-9 col-sm-12" id="thumb-output">
        <input id="files" class="" type="file" name="file[]" multiple>
        </div>
    </div>
</div>

$(document).ready(function() {

$('input[type=file]').on('dragenter', function() {
    $('div').addClass('dragover');
});

$('input[type=file]').on('dragleave', function() {
    $('div').removeClass('dragover');
});

if (window.File && window.FileList && window.FileReader) {
    var numFiles = $('input[type=file]')[0].files.length;

    $("#files").on("change", function(e) {
      var files = e.target.files, filesLength = files.length;

    if(files.length > 4){
        alert("you can select max 4 files.");
    }else{
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    }
    });
        } else {
    alert("Your browser doesn't support to File API")
  }
});

Answer 1

You can use a global variable to track how many files have been added.

var fileAdded = 0;

...

if(fileAdded + files.length > 4){
    alert("you can select max 4 files.");
} else {
    fileAdded = fileAdded + files.length;
    for (var i = 0; i < files.length; i++) {

    ...

    }
}

Also, please remember to decrease fileAdded when the user delete a file.

---

Here is an example:

var fileDict = new Object();

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        var numFiles = $('input[type=file]')[0].files.length;

        $("#files").on("change", function(e) {
            var files = e.target.files, filesLength = files.length;

            if(Object.keys(fileDict).length + files.length > 4){
                alert("you can select max 4 files.");
            }else{
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i];
                    fileDict[f.name] = f;
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        $("<div class=\"pip\">" +
                          "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/>" +
                          "<br/><span class=\"remove\" data-name=\""+f.name+"\">Remove</span>" +
                          "</div>").insertAfter("hr");
                    });
                    fileReader.readAsDataURL(f);
                }
            }
        });
    } else {
        alert("Your browser doesn't support to File API");
    }
});

$(document).on('click', '.remove', function(){
  delete fileDict[$(this).data("name")];
  $(this).parent(".pip").remove();
});

var upload = function() {
  let formData = new FormData();
  var i = 0;

  Object.keys(fileDict).forEach(item => {
    formData.append("file" + i, fileDict[item]);
    i += 1;
  });

  $.ajax({ 
      type: 'post', 
      url: '/upload.php',
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false,
      data: formData ,
      success: function(data) {
                alert(data);
              }
      });
}

img {
    max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="files" class="" type="file" name="file[]" multiple>

<hr>

<input type="button" value="Upload" onclick="upload()">

I am not sure which language you are using for backend. I use PHP here:

<?php
if (count($_FILES) > 4) {
  echo "you can select max 4 files.";
} else {
  foreach ($_FILES as $file_id => $file) {
    if ($file['error'] > 0) {
      echo 'Error: ' . $file['error'] . '<br>';
    } else {
      move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);
      echo 'uploads/' . $file['name'] . '<br>';
    }
  }
}