Tengo un cuadro de arrastrar y soltar con dropzone.js. Permito la carga de múltiples archivos (máximo 5 archivos en la actualidad). Solicité agregar una capacidad para que el usuario agregue una descripción para cada archivo cargado. Los retos que tengo:
Logré algo como esto usando una plantilla personalizada de cómo Dropzone muestra el archivo en la cola. Comencé con este ejemplo del autor de Dropzone que explica cómo usar una plantilla personalizada al mostrar archivos en la cola. Amplié el ejemplo agregando una entrada de formulario adicional a la plantilla.
<div class="table table-striped" class="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> <strong class="error text-danger" data-dz-errormessage></strong> </div> <!-- include a form field to collect the description --> <div> <label for="description">Description</label> <textarea id="description" data-name="description" rows="3"></textarea> </div> <!-- remainder of template removed for brevity --> </div> </div> Cuando agrega el elemento de formulario, si especifica un atributo de name , solo se enviará el valor del elemento de formulario asociado con el último archivo cuando se cargue el archivo porque tiene varios elementos de formulario, todos con el mismo atributo de name .
Para evitar esto, no incluí un atributo de name , sino que usé un atributo data-name . Luego agregué el valor del elemento del formulario a los datos del formulario cuando se envió el archivo usando este código:
myDropzone = new Dropzone('form#myuploadform') myDropzone.on( 'sending', function (file, xhr, formData) { let description = file.previewElement.querySelector('textarea') formData.append(description.getAttribute('data-name'), description.value) } ) Debido a que los valores de id se especifican en la plantilla, tendrán el mismo valor para cada archivo agregado a la cola que infrinja la especificación HTML, ya que los valores de id deben ser únicos. Además, dado que el atributo for del elemento LABEL hace referencia al id de TEXTAREA, esto también interrumpe la accesibilidad porque la segunda y subsiguientes ETIQUETAS harán referencia a la primera TEXTAREA.
Solucioné esto agregando el valor UUID que Dropzone asigna a cada objeto de file para la id y for atributos a medida que el archivo se agrega a la cola, que se explica en esta respuesta .