web-dev-qa-db-ja.com

プログラムで既存のファイルをDropzoneに追加する

dropzone.js FAQ をガイドとして使用して、既存の画像をプログラムでdropzoneに追加しようとしています：

// Add the existing image if it's there.
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point.
var on_load_header = $( '[name="on_load_header_image"]' ).val();
var on_load_header_path = $( '[name="on_load_header_image_path"]' ).val();

if ( on_load_header ) {

    // Hardcoded size value is just for testing, see my second question below.
    var on_load_header_data = { name: on_load_header, size: 12345 };

    // Call the default addedfile event handler
    headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );

    // And optionally show the thumbnail of the file:
    headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);

}

私の最初の問題は、これが機能していないことです。 addedfileイベントは発生しません（または、少なくともheaderDropzoneのaddedfileハンドラーは発生しません）、サムネイルについても同様です。

2番目の問題/質問：ファイルサイズを指定する必要がありますか？サーバー側で取得することもできますが、実際に必要のない場合は実行しません。

dropzone.js
18
Jesse Rosato

関数がheaderDropzone.options.addedfileおよびheaderDropzone.options.thumbnailは実際に定義されています。それはあなたがやったように機能するはずですが、それ以上の情報がなければ何が間違っているかを伝えるのは困難です。

ファイルサイズについて：いいえ、実際に正確なファイルサイズを提供する必要はありません。 Dropzoneがファイルサイズを自動的に表示するだけです。誤ったファイルサイズが表示されてもかまわない場合は、乱数または0。そうでない場合は、CSSを使用して、または追加後にJSを使用してファイルサイズを非表示にすることができます。 （問題の要素にはクラスdz-size。

JavaScriptバージョンは次のようになります。

var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size");
fileSizeElement.parentNode.removeChild(fileSizeElement);
9
enyo

複数の既存のファイルをDropzoneに追加する必要がある場合は、既存のファイルを配列として宣言してから、ループ内でプログラムによってDropzoneに追加します。

        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#myDropzone", {
            url: "/file/post",
            maxFileSize: 50,
            acceptedFiles: ".pdf",
            addRemoveLinks: true,
            //more dropzone options here
        });

        //Add existing files into dropzone
        var existingFiles = [
            { name: "Filename 1.pdf", size: 12345678 },
            { name: "Filename 2.pdf", size: 12345678 },
            { name: "Filename 3.pdf", size: 12345678 },
            { name: "Filename 4.pdf", size: 12345678 },
            { name: "Filename 5.pdf", size: 12345678 }
        ];

        for (i = 0; i < existingFiles.length; i++) {
            myDropzone.emit("addedfile", existingFiles[i]);
            //myDropzone.emit("thumbnail", existingFiles[i], "/image/url");
            myDropzone.emit("complete", existingFiles[i]);                
        }
21
Rosdi Kasim

Dropzone FAQ は、既存のファイルでドロップゾーンを適切にプリロードするために必要な重要な設定を省略します。

私のドロップゾーンの私の初期化方法：

Dropzone.options.MyDropZoneID = {
    ...
    init: function () {
        var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
        this.emit("addedfile", mockFile);
        this.createThumbnailFromUrl(mockFile, fileUrl);
        this.emit("success", mockFile);
        this.emit("complete", mockFile);
        this.files.Push(mockFile);
        ...

上記が完全な実装であるかどうかはわかりませんが、maxFiles設定で正しく機能しています。バグのある動作をしたくない場合は、これが非常に重要です（デフォルトのメッセージが表示されるべきでないときや、余分なファイルがアップロードされるなど）。受け入れられたプロパティをtrueに設定し、ファイルをfilesプロパティに追加する必要があります。必要ではないと思う唯一のことは、成功を出すことです。確かに知るには十分ではありませんでした。

注：次のNuGetパッケージを使用しました。

  • 作成者：Matias Meno
  • Id：ドロップゾーン
  • バージョン：4.2.0
18
Jeremy Ray Brown

もともと私はこれらの行に沿って既存のファイルをプログラムでDropzoneにアップロードするために何かをしていた：

headerDropzone.emit("addedfile", imageFile);                                
headerDropzone.emit("thumbnail", imageFile, imageUrl);
headerDropzone.files.Push(file);

しかし、これを参照 Dropzone Github Issue 私は直接アップロードする簡単な方法を見つけました：

headerDropzone.uploadFiles([imageFile])

残念ながら、このuploadFilesメソッドへの参照は Dropzone Documentationにはありません。 、だから私はあなたのすべてのDropzoneユーザーと知識を共有すると思った。

これが誰かを助けることを願って

6
Cumulo Nimbus

これは公式で回答されました [〜＃〜] faq [〜＃〜]

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
3
Matej Vrzala M4

同じ問題があり、DropzoneのhandleFiles(files)メソッドが見つかりました。

inputTypeFileRefがある場合、次のことができます。

// inputTypeFiles.files is an object of type FileList
var fileArray = Object.values(inputTypeFiles.files || {});
myDropZone.handleFiles(fileArray);

また、すべてのDropzoneのイベントをトリガーし、通常はファイルをドラッグすることでファイルデータ（進行状況、ファイルサイズなど）を渡します。

それが役に立てば幸いです。

1
Michael Vashchinsky

これらの回答の多くはかなり古く、これは執筆時点の最新のDropzone JSで機能しています（含まれているコメントに注意してください）：

init: function() {
    var dzObj = this;

    // In my template I looped through existing files from the database and created:
    // <div class="existing-image" data-url="/path/to/file.jpg"></div>
    $('.existing-image').each(function() {
        // I didn't have this data - works fine without
        var mockFile = { name: '', size: '', dataURL: $(this).data('url') };

        // Call the default addedfile event handler
        dzObj.emit("addedfile", mockFile);

        // The Dropzone JS FAQ incorrectly references "file" here instead of  mockFile".
        // The other parameters are outdated, dataURL goes in the object above,
        // and you need to pass through other parameters.
        // It DOES NOT WORK without the thumbnail event being triggered.
        dzObj.createThumbnailFromUrl(mockFile, dzObj.options.thumbnailWidth, dzObj.options.thumbnailHeight, dzObj.options.thumbnailMethod, true, function (dataUrl) {
            dzObj.emit("thumbnail", mockFile, dataUrl);
        });

        // Make sure that there is no progress bar, etc...
        dzObj.emit("complete", mockFile);

        dzObj.options.maxFiles = dzObj.options.maxFiles - 1;
    });
}
0
tjbp

最新のDropzoneには例がなく、ドキュメントは明確または不完全です。以下を使用して、既存の画像をDropzoneに追加できます。

for (var i = 0; i < imagesList.length; i++) {
  let name = imagesList[i];
  name = name.substring(name.lastIndexOf('/') + 1);

  fetch(imagesList[i])
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      myDropzone1.addFile(file);
    });
}

imagesListは、Dropzoneに追加する画像のリストです。

しかし、私はまだ問題に直面しています：imagesListのように、画像が追加/表示されず、順序/順序で表示されません。それらはかなりランダムに見えます。 imagesListのような順序/順序で画像を表示する方法はありますか？

0
J K