web-dev-qa-db-ja.com

アップロードされるdropzone.jsファイルの数を制限する方法は？

ユースケースに応じて、dropzone.jsで許可されるファイルの数を制限するにはどうすればよいですか？

たとえば、1、2、または4個のファイルのアップロードのみを許可する必要がある場合があります。

uploadMultipleではありません。残念ながら、uploadMultipleはリクエストごとに処理されるファイルの数にのみ適用されます。

filefile-uploaduploadlimitdropzone.js
68
pydanny

ノーウェルはこれが解決されたことを指摘した 2013年8月6日現在。このフォームを使用した実例は次のようになります。

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

次の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!");
    });
  }
};

Dropzone要素には特別なスタイルも設定されているため、次のようなことができます。

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

私はこれをわずかに異なる方法で達成しました。新しいファイルが追加されるたびに、古いドロップされたファイルを削除します。ここで行っていたユーザーエクスペリエンスであったファイルを上書きするように機能します。

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]);
      }
    });
  }
};
147
oneirois

最も直感的な単一ファイルのアップロードプロセスは、replaceが新しいエントリの前のファイルであると考えました。

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

maxFiles: 1は仕事をしますが、追加のファイルも削除したい場合は、 Wikiページ から取得したこのサンプルコードを使用できます。

ファイルの数を制限するにはどうすればよいですか？

あなたは幸運です！ 3.7.0以降、DropzoneはmaxFilesオプションをサポートしています。必要な量に設定するだけで準備完了です。拒否されたファイルを表示したくない場合は、単にmaxfilesexceededイベントに登録し、すぐにファイルを削除します。

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

私にとって本当にうまくいった代替ソリューション：

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

Dropzone.jsを変更して、アップロードするファイルの数を制限できます

Dropzone.prototype.defaultオプション= {maxFiles：10、}

3
vipinlalrv

maxFilesが探しているパラメータのようです。

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

3
Nowell

CSSを使用してクリックイベントを無効にしないのはなぜですか。最大ファイル数に達すると、Dropzoneはdz-max-files-reachedのクラスを自動的に追加します。

CSSを使用して、ドロップゾーンのクリックを無効にします。

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

クレジット：this answer

1
Timmy Von Heiss

指摘したいと思います。たぶん、これは私に起こりますが、dropzoneでthis.removeAllFiles（）を使用すると、イベントCOMPLETEが発生し、これが吹き飛ばされます。

0
Lucas Gabriel

コールバックを追加することもできます-ここでは、AngularにDropzoneを使用しています

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

提供されるソリューションの問題は、アップロードできるファイルが1つだけになることです。私の場合、一度にアップロードする必要があるファイルは1つだけでした（クリックまたはドロップで）。

これが私の解決策でした。

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

お役に立てれば ;）

0
SimonDepelchin