web-dev-qa-db-fra.com

Ajouter par programme un fichier existant à Dropzone

J'essaie d'ajouter une image existante à ma zone de dépôt par programmation, en utilisant le fichier dropzone.js FAQ comme guide: 

// 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);

}

Mon premier problème est que cela ne fonctionne tout simplement pas. L'événement addedfile ne se déclenche pas (ou au moins le gestionnaire de fichier ajouté dans headerDropzone ne se déclenche jamais), il en va de même pour la miniature.

Mon deuxième problème/question est: dois-je fournir la taille du fichier? Je pourrais l’obtenir côté serveur, mais je préférerais ne pas le faire si je n’en ai pas réellement besoin.

dropzone.js
17
Jesse Rosato

Voir si les fonctions headerDropzone.options.addedfile et headerDropzone.options.thumbnail sont réellement définies. Cela devrait fonctionner comme vous l'avez fait, mais sans informations supplémentaires, il est difficile de dire ce qui ne va pas.

À propos de la taille du fichier: Non, il n'est pas nécessaire de fournir une taille de fichier précise. C'est juste que Dropzone affiche automatiquement la taille du fichier. Si vous ne vous souciez pas de l'affichage d'une valeur de fichier fausse, vous pouvez simplement fournir un nombre aléatoire ou 0. Sinon, vous voudrez peut-être masquer la taille du fichier avec CSS, ou avec JS après l'avoir ajouté. (L'élément en question a la classe dz-size.

La version JavaScript de celui-ci ressemblerait à ceci:

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

Si vous avez besoin d'ajouter plusieurs fichiers existants dans Dropzone, déclarez vos fichiers existants en tant que tableau, puis ajoutez-les dans Dropzone par programme dans une boucle, comme suit ... 

        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]);                
        }
20
Rosdi Kasim

La zone Dropzone FAQ laisse de côté les paramètres importants nécessaires pour précharger correctement une zone de dépôt avec un (des) fichier (s) existant (s).

Ma méthode init pour ma zone de saut:

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);
        ...

Je ne sais pas si ce qui précède est une implémentation parfaite, mais cela fonctionne correctement avec le paramètre maxFiles. Ce qui est très important si vous ne voulez pas que le comportement soit bogué (comme le message par défaut qui ne devrait pas apparaître ou les fichiers supplémentaires téléchargés). Vous devez absolument définir la propriété acceptée sur true et ajouter le fichier à la propriété files. La seule chose qui, à mon avis, n’est pas requise est l’émission du succès. Je n'ai pas assez joué avec ça pour savoir avec certitude.

Remarque: j'ai utilisé le package NuGet suivant:

  • Créé par: Matias Meno
  • Id: dropzone
  • Version: 4.2.0
16
Jeremy Ray Brown

À l'origine, je faisais quelque chose dans ce sens pour télécharger par programme un fichier pré-existant sur Dropzone:

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

Cependant, en faisant référence à ce problème Problème Dropzone Github j’ai trouvé un moyen plus facile de télécharger directement:

headerDropzone.uploadFiles([imageFile])

Malheureusement, il n'y a aucune référence à cette méthode uploadFiles dans la Documentation Dropzone.

J'espère que cela aide quelqu'un

5
Cumulo Nimbus

Ceci est maintenant répondu en officiel 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

J'ai eu le même problème et j'ai trouvé la méthode handleFiles(files) de Dropzone.

Donc, si vous avez inputTypeFileRef, vous pouvez

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

Cela déclenchera également tous les événements de la Dropzone et transmettra les données de fichier (s) comme il le ferait normalement en y faisant glisser un fichier - progression, taille du fichier, etc.

J'espère que ça a aidé.

1
Michael Vashchinsky

Beaucoup de ces réponses sont assez datées, cela fonctionne pour moi dans la dernière version de Dropzone JS au moment de la rédaction (prenez note des commentaires inclus):

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

La dernière version de Dropzone est le manque d’exemples et la documentation n’est ni claire ni incomplète. Vous pouvez utiliser ce qui suit pour ajouter des images existantes à 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 est une liste d'images que vous souhaitez ajouter à Dropzone.

Cependant, je suis toujours confronté à un problème: les images ne sont pas ajoutées ou affichées dans l'ordre/la séquence comme dans imagesList. Ils semblent plutôt aléatoires. Existe-t-il un moyen de rendre les images affichées dans l'ordre/la séquence comme dans imagesList? 

0
J K