how to submit dropzone.js with different buttons

Question

I'm using dropzone.js with Laravel.

I'm submitting files with two different buttons (see image below).

When Merge and Upload as one file is clicked I want to send this button value to the controller.

When Save each file separately is clicked I want to send this button value controller.

I take a global variable which is input, which is working fine, but the problem is when I hit a button it sends the old value and not the current value.

Thanks for your help.

Here is my form:

<form action="{{route('mediamanager.store')}}" class="dropzone dropzone-nk needsclick" id="my-awesome-dropzone" method="post" enctype="multipart/form-data">
  {{ csrf_field() }}
  <div>
    <i class="notika-icon notika-cloud"></i>
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
    <h2>Drop files here or click to upload.</h2>
  </div>
  </div>
  <br>
  <div class="text-center">
    <input type="button" class="btn-success submit-merge" id="merge_file" value="Merge and Upload as one file" style="padding:0.8em">

    <input type="button" class="btn-success submit-separate" id="separate_file" value="Save each file separatly">
  </div>
</form>

Here is the script for the dropzone:

<script>

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,
    acceptedFiles:'.pdf',

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;
        var input = 'Null';


        $(".submit-merge").click(function (e) 
        {
            alert('
                    <input >
            ');
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();

            input = 'merge_file';

            console.log(input);
        });



        $(".submit-separate").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();

            input = 'separate_file';
            console.log(input);
        }); 
        // });

        // $(".submit-separate").click(function (e) {
        this.on("sendingmultiple", function(file, xhr, formData) {
        //Add additional data to the upload
            formData.append(input, $('#'+input).val());
        });

        this.on("success", function(file, responseText) {
            // location.reload();
            console.log('dfd');
        });

    }
}

</script>

BTW, unrelated but there are two closing `div`s before your `br` tag. You only need one there. — Sunny R Gupta, Feb 05 '19 at 11:46

score 1 · Accepted Answer · answered Feb 05 '19 at 11:44

You are changing the input value after processQueue().

in place of

    $(".submit-merge").click(function (e) {
        alert('
                <input >
        ');
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();

        input = 'merge_file';

        console.log(input);
    });



    $(".submit-separate").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();

        input = 'separate_file';
        console.log(input);
    });

Try:

    $(".submit-merge").click(function (e) {
        alert('
                <input >
        ');
        e.preventDefault();
        e.stopPropagation();

        input = 'merge_file';
        console.log(input);

        myDropzone.processQueue();
    });



    $(".submit-separate").click(function (e) {
        e.preventDefault();
        e.stopPropagation();

        input = 'separate_file';
        console.log(input);

        myDropzone.processQueue();
    });

how to submit dropzone.js with different buttons

1 Answers1