Jquery Dropzone.js cambia la larghezza della miniatura al 100% - jquery, css, dropzone.js

Sto usando Dropzone.js per consentire agli utenti di caricare file sul server, in base alle specifiche è possibile modificare la larghezza dell'anteprima come mostrato di seguito, tuttavia voglio cambiare la larghezza al 100% invece di usare px, è possibile?

Perché se lo faccio thumbnailWidth: 100% non riconoscerà% char.

    dzImageOptions = Dropzone.options.myDropzone = {
thumbnailWidth: 314, //I want to change width to 100% instead
thumbnailHeight: 314,
init: function (file) {

}
}
//Also have to change css or thumbnail won"t resize properly
.dropzone.song-image .dz-preview .dz-image {
border-radius: 1px;
width: 314px;
height: 314px;
}

<div class="dropzone song-image"></div>

risposte:

Non è possibile specificare una percentuale su thumbnailWidth e thumbnailHeight. Dropzone usa questi valori per creare l'origine dell'immagine per mostrarla come anteprima.

Ma puoi lasciare la miniatura alla larghezza e all'altezza originale, impostando questi valori su null(Si noti che questo può causare un po 'di ritardo con le immagini ad alta risoluzione) e quindi utilizzare il <img> attributi di larghezza e altezza per visualizzare l'immagine con la dimensione desiderata e regolando la .dz-image contenitore con css.

html:

<div class="dropzone" id="myDropzone"></div>

js:

Dropzone.autoDiscover = false;

Dropzone.options.myDropzone = {
url: "yourUrl",
thumbnailWidth: null,
thumbnailHeight: null,
init: function() {
this.on("thumbnail", function(file, dataUrl) {
$(".dz-image").last().find("img").attr({width: "100%", height: "100%"});
}),
this.on("success", function(file) {
$(".dz-image").css({"width":"100%", "height":"auto"});
})
}
};

var myDropzone = new Dropzone("div#myDropzone");

Avevo bisogno di realizzare miniature reattive condropzone e questo post hanno aiutato molto. Avevo anche bisogno di farlo senza jquery, quindi ecco cosa mi è venuto in mente. Ho pensato di condividere se aiuta qualcun altro.

La mia funzione di avvio di dropzone si presenta così:

init: function () {
this.on("thumbnail", function(file, dataUrl) {
var thumbs = document.querySelectorAll(".dz-image");
[].forEach.call(thumbs, function (thumb) {
var img = thumb.querySelector("img");
if (img) {
img.setAttribute("width", "100%");
img.setAttribute("height", "100%");
}
});
}),
this.on("success", function(file) {
var thumbs = document.querySelectorAll(".dz-image");
[].forEach.call(thumbs, function (thumb) {
thumb.style = "width: 100%; height: auto;";
});
})
}

Non sono un wizard javascript quindi probabilmente c'è un modo più efficiente o migliore per farlo. Per favore condividi!

var myDropZone = jQuery("#file128_dropzone").get(0).dropzone;
myDropZone.options.thumbnailWidth = 250;
myDropZone.options.thumbnailHeight = 250;