Comment limiter le nombre de dropzone.js les fichiers téléchargés?

Selon le cas, comment puis-je limiter le nombre de fichiers qui dropzone.js permettra?

Par exemple, je pourrais avoir besoin pour permettre seulement 1, 2, ou 4 fichiers téléchargés.

Ce n'est pas uploadMultiple. Malheureusement, uploadMultiple s'applique uniquement au nombre de dossiers traités par demande.

  • Utilisation maxFiles. Qui va aider
InformationsquelleAutor pydanny | 2013-08-04
  1. 148

    J'ai réalisé ce une manière légèrement différente. Je viens de supprimer les vieux fichiers supprimés à tout moment un nouveau fichier est ajouté. Il agit à titre d'écraser le fichier qui a été l'expérience de l'utilisateur j'allais pour ici.

    Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });
  }
};
    • Cela fonctionne vraiment bien. Les autres réponses ne le sont pas. Vous pouvez également faire le même travail dans la fonction d'accepter. this.files existe là aussi. Cela permettrait de raccourcir un peu le code.
    • où placer ce code à l'intérieur dropzone.js ou les codes html où la forme placés
    • C'est une excellente réponse à une autre question (Comment faire pour remplacer un fichier téléchargé précédemment).
    • Après avoir essayé les autres réponses, c'est la seule qui a fonctionné exactement comme je le souhaitais. Doit être accepté de répondre, à mon humble avis.
    • PARFAIT!! Fonctionne exactement comme la façon dont je le veux
    • Pour moi au courant Chrome, fichiers[1] est undefined quand il n'y a qu'un seul fichier, de sorte que la condition if retourne toujours true. Peut-être juste un changement de if (this.files[1])?

    InformationsquelleAutor oneirois
  2. 71

    Nowell a fait remarquer que cette question a été traitée à partir du 6 août, 2013. Un exemple de travail à l'aide de ce formulaire peut être:

    <form class="dropzone" id="my-awesome-dropzone"></form>

    Vous pouvez utiliser ce code JavaScript:

    Dropzone.options.myAwesomeDropzone = {
  maxFiles: 1,
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!");
    });
  }
};

    La dropzone élément obtient même un style spécial, de sorte que vous pouvez faire des choses comme:

    <style>
  .dz-max-files-reached {background-color: red};
</style>
    • ne devrait-elle pas être <form class="dropzone" id="myAwesomeDropzone"></form> ?
    • Je sais que c'est près d'un an après les faits, mais l'id est tiré par Dropzone et enyo fait le chameau cas pour vous. Afin de l'appelant, il est beaucoup plus facile. (Peut être un peu déroutant au premier abord, évidemment... mais ça marche donc je n'ai pas à me plaindre.)
    • Cela fonctionne bien lors de l'ajout de 1 fichier, puis le suivant. Bien que, si vous sélectionnez plusieurs fichiers sur votre ordinateur et faites-le glisser à la dropzone forme, tous d'entre eux sont ajoutés. Comment faire pour éviter cela?
    InformationsquelleAutor pydanny
  3. 65

    J'ai pensé que le plus intuitif seul fichier, le processus de chargement est à remplacer le fichier précédent sur une nouvelle entrée.

      $(".drop-image").dropzone({
    url: '/cart?upload-engraving=true',
    maxFiles: 1,
    maxfilesexceeded: function(file) {
        this.removeAllFiles();
        this.addFile(file);
    }
})
    • Cela n'a pas fonctionné pour moi, mais l'autre réponse par @oneirois n'.
    • Merci pour cette astuce, c'est ce que je cherchais. Aussi n'oubliez pas de conserver le fichier côté serveur, le cas échéant (c'est à dire: fichier précédent se faire supprimé).
    • Cela ne fonctionne pas lorsque autoProcessQueue est faux. Cependant, il déclenche lorsque maxFiles est 0 et autoProcessQueue est faux. Ce doit être un bug.
    • A parfaitement fonctionné très bien pour moi, et d'accord avec ce qui est plus intuitif seul fichier, le processus de chargement 🙂
    • +1 Cette réponse est une bien meilleure solution pour l'utilisateur final. Fonctionne bien sur mon projet à l'aide de la init: function(){ this.on('maxfilesexceeded', function(file){ this.removeAllFiles(); this.addFile(file); }); } option, même avec l'ajout de l'option autoProcessQueue: false.
    • bon à entendre, ce n'est toujours utile de nombreuses années plus tard!

    InformationsquelleAutor Yuji 'Tomita' Tomita
  4. 33

    maxFiles: 1 fait le travail, mais si vous souhaitez également supprimer les fichiers supplémentaires vous pouvez utiliser cet exemple de code à partir de la Page Wiki:

    Comment puis-je limiter le nombre de fichiers?

    Vous avez de la chance! En commençant par 3.7.0 Dropzone prend en charge la maxFiles
    option. Il suffit de le mettre à la quantité souhaitée et vous êtes bon pour aller.
    Si vous ne voulez pas les fichiers rejetés pour être affiché, il suffit de s'inscrire pour
    le maxfilesexceeded événement, et de supprimer le fichier immédiatement:

    myDropzone.on("maxfilesexceeded", function(file)
{
    this.removeFile(file);
});
    • Tellement sous-estimé la réponse.
    InformationsquelleAutor Leniel Maccaferri
  5. 6

    Solution Alternative qui a très bien fonctionné pour moi:

    init: function() {
    this.on("addedfile", function(event) {
        while (this.files.length > this.options.maxFiles) {
            this.removeFile(this.files[0]);
        }
    });
}
    InformationsquelleAutor xaviert
  6. 4

    Vous pouvez limiter le nombre de fichiers téléchargés en remplaçant, dans le dropezone.js

    Dropzone.le prototype.defaultOptions = {
    maxFiles: 10,
    }

    InformationsquelleAutor vipinlalrv
  7. 3

    il ressemble maxFiles est le paramètre que vous recherchez.

    https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

    • Cela a ajouté deux jours après, j'ai ouvert cette question. 😉
    InformationsquelleAutor Nowell
  8. 1

    Pourquoi ne pas simplement utiliser les CSS pour désactiver le clic de l'événement. Lorsque des fichiers max est atteint, Dropzone va automatiquement ajouter une classe de dz-max-fichiers-atteint.

    Utiliser les css pour la désactiver, cliquez sur dropzone: 

    .dz-max-files-reached {
          pointer-events: none;
          cursor: default;
}

    De crédit: ce réponse

    InformationsquelleAutor Timmy Von Heiss
  9. 0

    Le problème avec les solutions est que vous pouvez seulement de téléchargement 1 fichier jamais. Dans mon cas, j'avais besoin de télécharger 1 seul fichier à la fois (lors d'un clic ou d'abandon).

    C'était ma solution..

        Dropzone.options.myDropzone = {
maxFiles: 2,
init: function() {
this.handleFiles = function(files) {
var file, _i, _len, _results;
_results = [];
for (_i = 0, _len = files.length; _i < _len; _i++) {
file = files[_i];
_results.push(this.addFile(file));
//Make sure we don't handle more files than requested
if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) {
break;
}
}
return _results;
};
this._addFilesFromItems = function(items) {
var entry, item, _i, _len, _results;
_results = [];
for (_i = 0, _len = items.length; _i < _len; _i++) {
item = items[_i];
if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) {
if (entry.isFile) {
_results.push(this.addFile(item.getAsFile()));
} else if (entry.isDirectory) {
_results.push(this._addFilesFromDirectory(entry, entry.name));
} else {
_results.push(void 0);
}
} else if (item.getAsFile != null) {
if ((item.kind == null) || item.kind === "file") {
_results.push(this.addFile(item.getAsFile()));
} else {
_results.push(void 0);
}
} else {
_results.push(void 0);
}
//Make sure we don't handle more files than requested
if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) {
break;
}
}
return _results;
};
}
};

    Espère que cette aide 😉

    InformationsquelleAutor SimonDepelchin
  10. 0

    Je tiens à souligner. peut-être que cela arrive juste à moi, CEPENDANT, quand je l'utilise.removeAllFiles() dans dropzone, il déclenche l'événement COMPLET et ce souffle, ce que j'ai fait était de vérifier si la fileData est vide ou pas si je pouvais envoyer le formulaire.

    InformationsquelleAutor Lucas Gabriel
  11. 0

    Vous pouvez également ajouter des rappels - ici, je suis en utilisant Dropzone Angulaire 

    dzCallbacks = {
'addedfile' : function(file){
$scope.btSend = false;
$scope.form.logoFile = file;
},
'success' : function(file, xhr){
$scope.btSend = true;
console.log(file, xhr);
},
'maxfilesexceeded': function(file) {
$timeout(function() { 
file._removeLink.click();
}, 2000);
}
}
    InformationsquelleAutor Makah
  12. -1
    Dropzone.options.dpzSingleFile = {
paramName: "file", //The name that will be used to transfer the file
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
};
    InformationsquelleAutor ragesh pp