Limit the amount of files in Dropzone.js

Asked

Viewed 1,367 times

0

People are using the plugin Dropzone.js to send images and I need to limit the amount of images I send in it. For example I want to limit to 5 files in total. Then it can only send to the server and display the 5 files. How I do this on it?

2 answers

2

Just add maxFiles:, remembering that the correct thing is that you also validate on the server side how many achievements that are going up.

   $("div#myDropZone").dropzone({
        url: "ACTION/SERVIDOR",
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 1,
        maxFilesize: 5,
        <!--Adicione o Maximo de arquivos-->
        maxFiles: 8,
        acceptedFiles: "image/jpeg"

    });
  • So @João Manolo this property limits just how many files you can choose at a time in the multi-selection. I need for example I already clicked on 3 files and it showed the minuature of these 3 files there if I try to send 4 more it has to give the message that the limit is 5. I hope to have managed to explain me.

  • So @Joaonivaldo, I get it. The setting that is in the official documentation that controls the file limit is maxFiles: if it extrapolates the limit reported the event maxfilesexceeded is called. Try to add parallelUploads: 1, because it will upload only one file at a time.

0


HTML

<form class="dropzone" id="meuDropZone"></form>

Javascript:

Dropzone.options.meuDropZone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[5]!=null){
        this.removeFile(this.files[5]);
        alert("Limite de 5 arquivos excedido!");
      }
    });
  }
};
  • just as I explained above to João Manolo this code you posted only limits the amount of files you can choose from a single time. Try sending one file at a time and you will be able to send more than 5 files. Thank you

  • @Joaonivaldo, update the code, see if it works please.

  • worked in parts. When I have 5 files displayed and click on another it gives the limit message but deletes fifth file that was already sent and replaces by 6 file.

  • Try it now Joao!

  • friend to give right was just swap the files[4] for files[5] and all right. Thank you so much for the help.

  • Oops, that was my question, if the event was called AFTER the file was added! Show.

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.