Encontramos la contestación a esta inconveniente, o por lo menos eso creemos. Si sigues con dudas puedes dejarlo en el apartado de preguntas, que sin tardar
Solución:
No puede especificar un porcentaje en thumbnailWidth y thumbnailHeight. Dropzone usa estos valores para crear la fuente de la imagen para mostrarla como una vista previa.
Pero puede dejar la miniatura en el ancho y alto originales, estableciendo estos valores en null(Tenga en cuenta que esto puede causar un poco de retraso con imágenes de alta resolución.) y luego use el
.dz-image contenedor con css.
html:
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');
Necesitaba lograr miniaturas receptivas con dropzone y esta publicación me ayudó mucho. También necesitaba hacerlo sin jquery, así que esto es lo que se me ocurrió. Pensé que lo compartiría si ayuda a alguien más.
Mi función de inicio de dropzone se ve así:
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;';
);
)
No soy un asistente de JavaScript, por lo que probablemente haya una forma más eficiente o mejor de hacer esto. ¡Por favor comparte!