web-dev-qa-db-fra.com

Est-il possible d'utiliser Word par défaut ou PDF des images/icônes sous forme de vignettes plutôt que de fond grisé générique?

Je souhaite modifier l'arrière-plan grisé générique des fichiers Word/pdf dans l'aperçu des fichiers dropzone. C'est la vue par défaut:

 enter image description here

Quelle est la meilleure façon de le faire?

javascriptcss3dropzone.js
14
Gabriel

C'est comme ça que je l'ai fait finalement:

myAwesomeDropzone.on('addedfile', function(file) {

    var ext = file.name.split('.').pop();

    if (ext == "pdf") {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
    } else if (ext.indexOf("doc") != -1) {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/Word.png");
    } else if (ext.indexOf("xls") != -1) {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/Excel.png");
    }
});

Les images doivent être 120x120 pixels pour correspondre au modèle de prévisualisation par défaut.

Voici le résultat:

 enter image description here

13
Gabriel

J'ai trouvé un moyen simple de faire cela tout à l'heure. Veuillez noter que je am using jQuery, alors assurez-vous de l'inclure aussi.

Tout d’abord, assurez-vous que votre Dropzone a une id. Le mien est myAwesomeDropzone:

<form id="myAwesomeDropzone" action="/upload-target" class="dropzone"></form>

Deuxièmement, créez des icônes d’image pour chaque type de fichier à inclure. J'ai trouvé des icônes pour PDF et Word et les ai placées dans un répertoire appelé img.

Ensuite, incluez le code JavaScript suivant:

// Make sure to use YOUR Dropzone's ID below...
Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');

    switch (file.type) {
      case 'application/pdf':
        thumbnail.css('background', 'url(img/pdf.png');
        break;
      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        thumbnail.css('background', 'url(img/doc.png');
        break;
    }

    done();
  },
};

Le code ci-dessus fonctionnera pour PDF et Word. Si vous souhaitez en ajouter d'autres, ajoutez simplement cases à l'instruction switch à l'aide de ce modèle:

case '[mime type]':
  thumbnail.css('background', 'url(img/[icon filename]');
  break;

Notez que vous pouvez trouver le type mime en ajoutant console.log(file.type); à la fonction accept, puis déposez un fichier de test et vérifiez la console de votre navigateur.

Explication

Dropzone vous permet de configurer une zone de dépôt avec un objet de configuration sous la forme Dropzone.options.[your dropzone's id]. L'une des options est une fonction accept qui est déclenchée avant qu'un fichier ne soit accepté. Vous pouvez utiliser le premier paramètre de cette fonction pour espionner le fichier entrant.

Ce paramètre a des propriétés telles que type qui peuvent vous indiquer le type mime. Une fois que vous connaissez le type MIME, vous pouvez modifier l'image d'arrière-plan de l'élément à l'aide de CSS. Notre élément sera toujours $('.dropzone .dz-preview.dz-file-preview .dz-image:last') puisque nous voulons toujours cibler le dernier fichier Dropzone. Il suffit de changer l'image d'arrière-plan pour une icône appropriée. Par exemple, n'importe lequel de ceux-ci fonctionnera pour PDF.

14
Travis

Utilisez ceci:

this.emit("thumbnail", file, "/WebResources/cre_pdf_icon");

ou

myDropzone.emit("thumbnail", file, "/WebResources/cre_pdf_icon");
1
mkk

Je pense qu'il est important de redimensionner la vignette, vous devez donc ajouter une ligne à redimensionner.

Dropzone.options.myAwesomeDropzoneUpload = {
    accept: function(file, done) {

        switch (file.type) {
          case 'application/pdf':
              this.emit("thumbnail", file, "/static/img/pdf.png");            
              break;
          case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
              this.emit("thumbnail", file, "/static/img/Word.png"); 
              break;
        }
        file.previewTemplate.querySelector(".dz-image img").style.width="120px";

        done();
    }
};
0
Faruk ÜNAL

J'ai fini par utiliser une variante de la réponse donnée par @Gabriel

Dropzone.options.myAwesomeDropzone= {
            init: function () {
                this.on("addedfile", function (data) {
                    console.log(data);

                    var ext = data.name.split('.').pop();

                    if (ext == "pdf") {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
                    } else if (ext.indexOf("doc") != -1) {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/Word.png");
                    } else if (ext.indexOf("xls") != -1) {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/Excel.png");
                    } else if (ext.indexOf("xlsx") != -1) {
                        $(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/Excel.png");
                    }
                });
            }
        };
0
Liknes