Программно добавить существующий файл в Dropzone

Ответ 1

Посмотрите, действительно ли определены функции 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);

Ответ 2

Если вам нужно добавить несколько существующих файлов в 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]);                
        }

Ответ 3

Часто задаваемые вопросы о Dropzone оставляет за собой важные настройки, необходимые для правильной предварительной загрузки dropzone с (существующими) существующими файлами.

Мой метод init для моей dropzone:

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 и добавить файл в свойство файлов. Единственное, что, я думаю, не требуется, - это успех. Я не играл с этим достаточно, хотя знаю наверняка.

Примечание. Я использовал следующий пакет NuGet:

• Создано: Matias Meno
• Id: dropzone
• Версия: 4.2.0

Ответ 4

Первоначально я делал что-то подобное, чтобы программно загрузить ранее существующий файл в Dropzone:

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

Однако, ссылаясь на эту проблему Dropzone Github, я нашел более простой способ прямой загрузки:

headerDropzone.uploadFiles([imageFile])

К сожалению, нет ссылки на этот метод uploadFiles в документации Dropzone, поэтому я решил поделиться знаниями со всеми вами пользователями Dropzone.

Надеюсь, это поможет кому-то

Ответ 5

Теперь это ответят в официальном 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;

Ответ 6

У меня была та же проблема и был найден метод Dropzone handleFiles(files).

Итак, если у вас есть inputTypeFileRef, вы можете

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

Это также вызовет все события Dropzone и передаст файлы (файлы), которые, как обычно, будут перетаскивать на него файл - прогресс, размер файла и т.д.

Надеюсь, что это помогло.

Ответ 7

Последняя 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?

Ответ 8

Многие из этих ответов довольно устарели, это работает для меня в последней версии 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;
    });
}

Ответ 9

Ответ @tjbp работал хорошо для меня со следующими изменениями:

1. Я не мог удалить программно добавленный файл, а затем добавить другой. Я исправил это, удалив эту строку, в которой для параметра maxFiles было установлено значение 0.

   //Если вы используете параметр maxFiles, убедитесь, что вы настроили его на // правильное количество: var существующиеFileCount = 1;//Количество уже загруженных файлов myDropzone.options.maxFiles = myDropzone.options.maxFiles - существующиеFileCount;

2. Чтобы убедиться, что кнопка "Удалить" была видна, мне нужно было добавить следующую строку:

       if (mockFile.previewElement) {
         mockFile.previewElement.classList.add("dz-success");
       }