javascript - Publicación que no es de Ajax utilizando Dropzone.js

html post

Question

Me pregunto si hay alguna forma de hacer que Dropzone.js ( http://dropzonejs.com ) funcione con un POST de navegador estándar en lugar de AJAX.

¿Alguna forma de inyectar las entradas type = file en el DOM justo antes de enviar quizás?

Answer 1

No. No puede establecer manualmente el valor de un <input type=''file''> por razones de seguridad. Cuando utiliza las funciones de arrastrar y soltar de Javascript, está superando por completo la entrada del archivo. Una vez que se obtiene un archivo de la computadora del usuario, la única forma de enviar el archivo al servidor es a través de AJAX.

Soluciones alternativas: en su lugar, podría serializar el archivo o, de lo contrario, hacerlo en cadena y anexarlo al formulario como una cadena, y luego deserializarlo en el lado del servidor.

var base64Image;
var reader = new FileReader();
reader.addEventListener("load", function () {
base64Image = reader.result;
// append the base64 encoded image to a form and submit
}, false);
reader.readAsDataURL(file);

¿Quizás esté utilizando dropzone.js porque las entradas de archivos son feas y difíciles de diseñar? Si ese es el caso, esta alternativa Dropzone.js puede funcionar para usted. Le permite crear entradas personalizadas que se pueden enviar con un formulario. Es compatible con arrastrar y soltar también, pero con arrastrar y soltar no puede enviar el formulario de la manera que desee. Descargo de responsabilidad: soy autor de la biblioteca antes mencionada .

Answer 2

Entonces, si entendí correctamente, desea agregar algunos datos (entrada = archivo) antes de enviar su formulario que tiene activada la zona de exclusión, ¿no?

Si es así, tuve que hacer casi lo mismo y lo obtuve escuchando los eventos. Si solo subes un archivo, debes escuchar el evento de "envío", pero si quieres habilitar varias cargas, debes escuchar "sendingmultiple". Aquí hay una parte de mi código que utilicé para hacer que esto funcione:

Dropzone.options.myAwesomeForm = {
acceptedFiles: "image/*",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
init: function() {
var myDropzone = this;
[..some code..]
this.on("sendingmultiple", function(files, xhr, formData) {
var attaches = $("input[type=file]").filter(function (){
return this.files.length > 0;
});
var numAttaches = attaches.length;
if( numAttaches > 0 ) {
for(var i = 0; i < numAttaches; i++){
formData.append(attaches[i].name, attaches[i].files[0]);
$(attaches[i]).remove();
}
}
});
[..some more code..]
}
}

Y eso es. Espero que le sea útil :)

PD: Perdón si hay algún error de gramática, pero el inglés no es mi lengua materna

Answer 3

Para futuros visitantes, he agregado esto a las opciones de drop zone:

addedfile: function (file) {
var _this = this,
attachmentsInputContainer = $(''#attachment_images'');
file.previewElement = Dropzone.createElement(this.options.previewTemplate);
file.previewTemplate = file.previewElement;
this.previewsContainer.appendChild(file.previewElement);
file.previewElement.querySelector("[data-dz-name]").textContent = file.name;
file.previewElement.querySelector("[data-dz-size]").innerHTML = this.filesize(file.size);
if (this.options.addRemoveLinks) {
file._removeLink = Dropzone.createElement("<a class=/"dz-remove/" href=/"javascript:undefined;/">" + this.options.dictRemoveFile + "</a>");
file._removeLink.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
if (file.status === Dropzone.UPLOADING) {
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function () {
return _this.removeFile(file);
});
} else {
if (_this.options.dictRemoveFileConfirmation) {
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function () {
return _this.removeFile(file);
});
} else {
return _this.removeFile(file);
}
}
});
file.previewElement.appendChild(file._removeLink);
}
attachmentsInputContainer.find(''input'').remove();
attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find(''input'').attr(''name'', ''files'');
return this._updateMaxFilesReachedClass();
},

Esta es la implementación predeterminada de la opción de archivo agregado de dropzone con 3 inserciones.

Adjuntos variables declaradosInputContainer. Este es un bloque invisible. Algo como

<div id="attachment_images" style="display:none;"></div>

Aquí almaceno la entrada futura con las imágenes seleccionadas Luego, al final de la función, elimino la entrada agregada previamente (si existe) del bloque y añado nuevo

attachmentsInputContainer.find(''input'').remove();
attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find(''input'').attr(''name'', ''files'');

Y ahora, cuando envíe el formulario a través del botón de envío simple, ingrese [name = "files"] con los valores que serán enviados.

Hice este truco porque añado archivos para publicar que quizás aún no se hayan creado

Answer 4

Esto es lo que utilicé para mis proyectos anteriores,

function makeDroppable(element, callback) {
var input = document.createElement(''input'');
input.setAttribute(''type'', ''file'');
input.setAttribute(''multiple'', true);
input.style.display = ''none'';
input.addEventListener(''change'', triggerCallback);
element.appendChild(input);
element.addEventListener(''dragover'', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.add(''dragover'');
});
element.addEventListener(''dragleave'', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove(''dragover'');
});
element.addEventListener(''drop'', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove(''dragover'');
triggerCallback(e);
});
element.addEventListener(''click'', function() {
input.value = null;
input.click();
});
function triggerCallback(e) {
var files;
if(e.dataTransfer) {
files = e.dataTransfer.files;
} else if(e.target) {
files = e.target.files;
}
callback.call(null, files);
}
}