Botón de envío de Dropzone al cargar

Siéntete en la libertad de compartir nuestros post y códigos con otro, necesitamos de tu ayuda para aumentar esta comunidad.

Solución:

Necesitas:

1. Añadir un botón:

   Submit
   

2. Dile a Dropzone no para cargar automáticamente el archivo cuando lo suelte, como lo hará de forma predeterminada. Eso se hace con el autoProcessQueue opción de configuración:

   autoProcessQueue: false
   

3. Dado que Dropzone ahora no cargará automáticamente los archivos, debe indicarle manualmente que lo haga cuando haga clic en su botón. Por lo tanto, necesita un controlador de eventos para hacer clic en ese botón, que le dice a Dropzone que realice la carga:

   $("#button").click(function (e) 
       e.preventDefault();
       myDropzone.processQueue();
   );
   

4. Eso solo publicará el archivo cargado, sin ninguno de sus otros campos de entrada. Probablemente desee publicar todos los campos, por ejemplo, su refCampaignID, un token CSRF si tiene uno, etc. Para hacerlo, debe copiarlos en el POST antes de enviarlos. Dropzone tiene un sending evento que se llama justo antes de que se envíe cada archivo, donde puede agregar una devolución de llamada:

   this.on('sending', function(file, xhr, formData) 
       // Append all form inputs to the formData Dropzone will POST
       var data = $('form').serializeArray();
       $.each(data, function(key, el) 
           formData.append(el.name, el.value);
       );
   );
   

Poniendolo todo junto:

Dropzone.options.frmTarget = 
    autoProcessQueue: false,
    url: 'upload_files.php',
    init: function () 

        var myDropzone = this;

        // Update selector to match your button
        $("#button").click(function (e) 
            e.preventDefault();
            myDropzone.processQueue();
        );

        this.on('sending', function(file, xhr, formData) 
            // Append all form inputs to the formData Dropzone will POST
            var data = $('#frmTarget').serializeArray();
            $.each(data, function(key, el) 
                formData.append(el.name, el.value);
            );
        );
    

Pensé en agregar una solución JS de vainilla pura también, sin jQuery.

/* 'dropform' is a camelized version of your dropzone form's ID */
      Dropzone.options.dropform = 
        /* Add all your configuration here */
        autoProcessQueue: false,

        init: function()
        
          let myDropzone = this;
          /* 'submit-dropzone-btn' is the ID of the form submit button */
          document.getElementById('submit-dropzone-btn').addEventListener("click", function (e) 
              e.preventDefault();
              myDropzone.processQueue();
          );

          this.on('sending', function(file, xhr, formData) 
          
            /* OPTION 1 (not recommended): Construct key/value pairs from inputs in the form to be sent off via new FormData
               'dropform' is the ID of your dropzone form
               This method still works, but it's submitting a new form instance.  */
              formData = new FormData(document.getElementById('dropform'));

             /* OPTION 2: Append inputs to FormData */
              formData.append("input-name", document.getElementById('input-id').value);
          );
        
      ;

NOTA: Configuración de detectores de eventos como el sending uno que estamos haciendo aquí debe ser puesto dentro de la init función. Si tuviera que colocarlos en otro lugar, por ejemplo:

init: function() 

    //...
,
sending: function(file, xhr, formData) 

  //... logic before each file send

esto anulará la lógica predeterminada que proporciona dropzone para el sending detector de eventos y puede causar efectos secundarios no deseados. Solo debes hacer esto si sabes lo que estás haciendo.

Tienes la opción de añadir valor a nuestro contenido informacional participando con tu veteranía en los informes.

---

---

Utiliza Nuestro Buscador