templates - modal - dropzone preview template
Cómo agregar entrada de texto a la carga de Dropzone (7)
Me gustaría permitir que los usuarios envíen un título para cada archivo que se arrastra a Dropzone que se ingresará en una entrada de texto. Pero no sé cómo agregarlo. ¿Todos pueden ayudarme?
Este es mi código html
<form id="my-awesome-dropzone" class="dropzone">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<!-- Now setup your input fields -->
<input type="email" name="username" id="username" />
<input type="password" name="password" id="password" />
<button type="submit">Submit data and files!</button>
</form>
Y este es mi código de script
<script>
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we''ve talked about above
url: "upload.php",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
maxFilesize:10,//MB
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn''t actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it''s the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
},
accept: function (file, done) {
//maybe do something here for showing a dialog or adding the fields to the preview?
},
addRemoveLinks: true
}
</script>
Aquí está mi solución:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: ''yourUploader.php'',
init: function () {
this.on(
"addedfile", function(file) {
caption = file.caption == undefined ? "" : file.caption;
file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
file._captionBox = Dropzone.createElement("<input id=''"+file.filename+"'' type=''text'' name=''caption'' value="+caption+" >");
file.previewElement.appendChild(file._captionLabel);
file.previewElement.appendChild(file._captionBox);
}),
this.on(
"sending", function(file, xhr, formData){
formData.append(''yourPostName'',file._captionBox.value);
})
}
});
yourUploader.php:
<?php
// Your Dropzone file named
$myfileinfo = $_POST[''yourPostName''];
// And your files in $_FILES
?>
Bueno, encontré una solución para mí, así que la escribiré con la esperanza de que también pueda ayudar a otras personas. El enfoque básico es tener una nueva entrada en el contenedor de vista previa y establecerla a través de la clase css si los datos del archivo son entrantes por un proceso de carga posterior o al inicio desde los archivos existentes.
Tienes que integrar el siguiente código en el tuyo ... Acabo de omitir algunas líneas que podrían ser necesarias para que funcione.
photowolke = {
render_file:function(file)
{
caption = file.title == undefined ? "" : file.title;
file.previewElement.getElementsByClassName("title")[0].value = caption;
//change the name of the element even for sending with post later
file.previewElement.getElementsByClassName("title")[0].id = file.id + ''_title'';
file.previewElement.getElementsByClassName("title")[0].name = file.id + ''_title'';
},
init: function() {
$(document).ready(function() {
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
photowolke.myDropzone = new Dropzone("div#files_upload", {
init: function() {
thisDropzone = this;
this.on("success", function(file, responseText) {
//just copy the title from the response of the server
file.title=responseText.photo_title;
//and call with the "new" file the renderer function
photowolke.render_file(file);
});
this.on("addedfile", function(file) {
photowolke.render_file(file);
});
},
previewTemplate: previewTemplate,
});
//this is for loading from a local json to show existing files
$.each(photowolke.arr_photos, function(key, value) {
var mockFile = {
name: value.name,
size: value.size,
title: value.title,
id: value.id,
owner_id: value.owner_id
};
photowolke.myDropzone.emit("addedfile", mockFile);
// And optionally show the thumbnail of the file:
photowolke.myDropzone.emit("thumbnail", mockFile, value.path);
// Make sure that there is no progress bar, etc...
photowolke.myDropzone.emit("complete", mockFile);
});
});
},
};
Y ahí está mi plantilla para la vista previa:
<div class="dropzone-previews" id="files_upload" name="files_upload">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail width="150" /></span>
</div>
<div>
<input type="text" data-dz-title class="title" placeholder="title"/>
<p class="name" data-dz-name></p><p class="size" data-dz-size></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
</div>
En mi respuesta, sustituya su campo "título" por mi campo "descripción".
Agregue texto de entrada o área de texto a la plantilla de vista previa. Por ejemplo:
<div class="table table-striped files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<input class="text" type="text" name="description" id="description" placeholder="Searchable Description">
</div> ... etc.
</div>
</div>
Luego, en la función de envío, agregue los datos asociados:
myDropzone.on("sending", function(file, xhr, formData) {
// Get and pass description field data
var str = file.previewElement.querySelector("#description").value;
formData.append("description", str);
...
});
Finalmente, en el script de procesamiento que realiza la carga real, reciba los datos del POST:
$description = (isset($_POST[''description'']) && ($_POST[''description''] <> ''undefined'')) ? $_POST[''description''] : '''';
Ahora puede almacenar su descripción (o título o lo que tenga) en una base de datos, etc.
Espero que esto funcione para usted. Era un hijo de arma para averiguar.
En realidad, puede proporcionar una plantilla para Dropzone para representar la vista previa de la imagen, así como cualquier campo adicional. En su caso, sugeriría tomar la plantilla predeterminada o hacer la suya propia, y simplemente agregar el campo de entrada allí:
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<input type="text" placeholder="Title">
</div>
La plantilla de vista previa predeterminada completa se puede encontrar en el código fuente de dropzone.js.
Luego, simplemente puede pasar su plantilla personalizada a Dropzone como una cadena para la clave previewTemplate de los parámetros de la opción. Por ejemplo:
var myDropzone = new Dropzone(''#yourId'', {
previewTemplate: "..."
});
Mientras su elemento sea un formulario, Dropzone incluirá automáticamente todas las entradas en los parámetros de solicitud xhr.
Este está algo oculto en los documentos, pero el lugar para agregar datos adicionales está en el evento de "envío". El evento de envío se llama justo antes de enviar cada archivo y obtiene el objeto xhr y los objetos formData como segundo y tercer parámetro, por lo que puede modificarlos.
Básicamente, querrá agregar esos dos parámetros adicionales y luego agregar los datos adicionales dentro de la función "enviar" o, en su caso, "sendmultiple". Puedes usar jQuery o simplemente js para obtener los valores. Entonces debería verse algo como:
this.on("sendingmultiple", function(file, xhr, formData) {
//Add additional data to the upload
formData.append(''username'', $(''#username'').val());
formData.append(''password'', $(''#password'').val());
});
Estoy haciendo algo bastante similar. Lo logré simplemente agregando un diálogo modal con jquery que se abre cuando se agrega un archivo. Espero eso ayude.
this.on("addedfile", function() {
$("#dialog-form").dialog("open");
});
Para aquellos que quieran conservar los datos automáticos y enviarlos (como una identificación o algo que no depende del usuario), puede agregar un setTimeout a "addedfile":
myDropzone.on("addedfile", function(file) {
setTimeout(function(){
myDropzone.processQueue();
}, 10);
});