javascript - example - dropzone multiple files

Enviar datos personalizados con dropzone.js en cada carga de archivo

Question

Estoy usando Dropzone en mi Proyecto Code Igniter.

Con cada arrastre de un archivo, dropzone crea una solicitud ajax y mis archivos también se almacenan en el servidor. Pero ahora, mi requisito es que quiero enviar datos adicionales ( DYNAMIC ) junto con el archivo. Con el uso de params, solo se pueden enviar datos estáticos, pero los datos que deseo enviar cambiarán cada vez.

Así es como se ve mi código:

<script>
 Dropzone.autoDiscover = false;
  Dropzone.options.attachment = {
        init: function(){
          this.on(''removedfile'',function(file){
            // console.log(''akjsdhaksj'');
            var fileName = file.name;
            $.ajax({
              type: ''POST'',
              url: "<?php echo BASE_URL.''index.php/admin/mail_actions/deleteFile'' ?>",
              data: "id="+fileName,
              dataType: ''html''
            });
          });
        },
        // params: {
        // customerFolder: $(''#toValue'').substr(0, toValue.indexOf(''@'')),
        // },
        dictDefaultMessage:"Click / Drop here to upload files",
        addRemoveLinks: true,
        dictRemoveFile:"Remove",
        maxFiles:3,
        maxFilesize:8,
  }

$(function(){

  var uploadFilePath = "<?php echo BASE_URL.''index.php/admin/mail_actions/uploadFile'' ?>";
  var myDropzone     = new Dropzone("div#attachment", { url: uploadFilePath});

});
</script>

De todos modos, puedo lograrlo?

Answer 1

Abhinav tiene la respuesta correcta y funcional. Solo quiero dar una segunda opción para usarla en el objeto de opciones (por ejemplo, si tiene varias secciones de Dropzone en una página).

myDropzone.options.dropzoneDivID = {
    sending: function(file, xhr, formData){
        formData.append(''userName'', ''Bob'');
    }
};

Answer 2

En caso de que tenga un objeto de carga anidada, por ejemplo, para agregar un nombre a su archivo y su API solo acepta algo como esto

{
    someParameter: {
        image: <my-upload-file>,
        name: ''Bob''
    }
}

su configuración de Dropzone se vería así

var myDropzone     = new Dropzone("div#attachment", { 
    url: uploadFilePath,
    paramName: ''someParameter[image]''
});

myDropzone.on(''sending'', function(file, xhr, formData){
    formData.append(''someParameter[image]'', file);
    formData.append(''someParameter[userName]'', ''bob'');
});

Solo agregué esto ya que no había ningún ejemplo para los parámetros anidados documentados desde ahora.

Answer 3

Entiendo. Esto es lo que tuve que usar

myDropzone.on(''sending'', function(file, xhr, formData){
            formData.append(''userName'', ''bob'');
        });