web-dev-qa-db-fra.com

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

En fonction du cas d'utilisation, comment puis-je limiter le nombre de fichiers autorisés par dropzone.js?

Par exemple, il se peut que je n’ai besoin d’autoriser que 1, 2 ou 4 fichiers téléchargés.

Ce n'est pas uploadMultiple. Malheureusement, uploadMultiple ne s'applique qu'au nombre de fichiers traités par demande.

filefile-uploaduploadlimitdropzone.js
64
pydanny

Nowell a fait remarquer que cela avait été résolu au 6 août 2013. Un exemple de travail utilisant ce formulaire pourrait être:

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

Vous pouvez utiliser ce 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!");
    });
  }
};

L'élément dropzone a même un style spécial, vous pouvez donc faire les choses suivantes:

<style>
  .dz-max-files-reached {background-color: red};
</style>
68
pydanny

J'ai réalisé ceci d'une manière légèrement différente. Je supprime simplement l'ancien fichier déposé chaque fois qu'un nouveau fichier est ajouté. Il agit en écrasant le fichier qui était l'expérience utilisateur que je voulais 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]);
      }
    });
  }
};
141
oneirois

Je pensais que le processus de téléchargement de fichier unique le plus intuitif consistait à remplacer le fichier précédent lors d’une nouvelle entrée.

  $(".drop-image").dropzone({
    url: '/cart?upload-engraving=true',
    maxFiles: 1,
    maxfilesexceeded: function(file) {
        this.removeAllFiles();
        this.addFile(file);
    }
})
59
Yuji 'Tomita' Tomita

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

Comment puis-je limiter le nombre de fichiers?

Tu es chanceux! À partir de la version 3.7.0, Dropzone prend en charge maxFiles option. Réglez simplement la quantité souhaitée et vous êtes prêt à partir . Si vous ne voulez pas que les fichiers rejetés soient visualisés, enregistrez-vous simplement pour l'événement maxfilesexceeded et supprimez le fichier immédiatement:

myDropzone.on("maxfilesexceeded", function(file)
{
    this.removeFile(file);
});
29
Leniel Maccaferri

il semble que maxFiles soit le paramètre que vous recherchez.

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

3
Nowell

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]);
        }
    });
}
2
xaviert

Vous pouvez limiter le nombre de fichiers téléchargés en changeant dans dropzone.js

Dropzone.prototype.default Options = { maxFiles: 10, }

1
vipinlalrv

Pourquoi n'utilisez-vous pas simplement CSS pour désactiver l'événement click. Lorsque le nombre maximal de fichiers est atteint, Dropzone ajoute automatiquement une classe de fichiers dz-max-reach.

Utilisez css pour désactiver, cliquez sur dropzone: 

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

Crédit: this répondre

1
Timmy Von Heiss

Je voudrais souligner. C’est peut-être ce qui m’arrive à moi, cependant, lorsque j’utilise this.removeAllFiles () dans Dropzone, il déclenche l’événement COMPLETE et, dans ce cas, j’ai vérifié si le fileData était vide ou non pour pouvoir envoyer le formulaire.

0
Lucas Gabriel

Vous pouvez également ajouter des rappels - ici, j'utilise Dropzone pour Angular 

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);
    }
}
0
Makah

Le problème avec les solutions fournies est que vous ne pouvez télécharger qu'un seul fichier. Dans mon cas, je n'avais besoin de télécharger qu'un fichier à la fois (par clic ou par déplacement).

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

J'espère que cela t'aides ;)

0
SimonDepelchin