Question

56

Dropzone Submit Button on Upload

rated 0 times [ 62] [ 6] / answers: 1 / hits: 71977 / 7 Years ago, fri, october 13, 2017, 12:00:00

I want to add a button upload to my dropzone file uploader. currently it's uploading the file directly after selecting or dragging the file into the dropzone area. What I want to do is:
1. Select or drap file to be uploaded.
2. Validate
3. Hit or press the button upload to upload the file.

N.B: File is only being uploaded after pressing the button upload.

Here is my form

<form id='frmTarget' name='dropzone' action='upload_files.php' class='dropzone'>

   <div class='fallback'>

      <input name='file' type='file' multiple />

   </div>

   <input id='refCampaignID' name='refCampaignID' type='hidden' value= $rowCampaign->CampaignID />

</form>

Here is my JS

Dropzone.options.frmTarget = 

    {

            url: 'upload_files.php',

            paramName: 'file',

            clickable: true,

            maxFilesize: 5,

            uploadMultiple: true, 

            maxFiles: 2,

            addRemoveLinks: true,

            acceptedFiles: '.png,.jpg,.pdf',

            dictDefaultMessage: 'Upload your files here',

            success: function(file, response)

            {

                setTimeout(function() {

                    $('#insert_pic_div').hide();

                    $('#startEditingDiv').show();

                }, 2000);

            }

        };

Here is my php post request

 foreach ($_FILES[file] as $key => $arrDetail) 

   {

      foreach ($arrDetail as $index => $detail) {

         //print_rr($_FILES[file][$key][$index]);

         $targetDir = project_images/;

         $fileName = $_FILES[file]['name'][$index];

         $targetFile = $targetDir.$fileName;



         if(move_uploaded_file($_FILES[file]['tmp_name'][$index],$targetFile))

         {

            $db = new ZoriDatabase(tblTarget, $_REQUEST[TargetID], null, 0);

            $db->Fields[refCampaignID] = $_REQUEST[refCampaignID];

            $db->Fields[strPicture] = $fileName;

            $db->Fields[blnActive] = 1;

            $db->Fields[strLastUser] = $_SESSION[USER]->USERNAME;

            $result = $db->Save();



            if($result->Error == 1){

               return Details not saved.;

            }else{

               return Details saved.;

            }

         }else{

            return File not uploaded.;

         }

      }

   }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckinleykeyshawnb

Add To Favorites

Follow

Total Points: 281

Total Questions: 99

Total Answers: 111

Location: Saudi Arabia

Member since Sat, Aug 20, 2022

2 Years ago

answered 7 Years ago monetm · Accepted Answer

You need to:

Add a button:

<button type=submit id=button class=btn btn-primary>Submit</button>

Tell Dropzone not to automatically upload the file when you drop it, as it will by default. That's done with the autoProcessQueue config option:
```
autoProcessQueue: false
```

Since Dropzone will now not auto-upload the files, you need to manually tell it to do that when you click your button. So you need an event handler for that button click, which tells Dropzone to do the upload:
```
$(#button).click(function (e) {

    e.preventDefault();

    myDropzone.processQueue();

});
```

That will just POST the uploaded file, without any of your other input fields. You probably want to post all fields, eg your refCampaignID, a CSRF token if you have one, etc. To do that, you need to copy them into the POST before sending. Dropzone has a sending event which is called just before each file is sent, where you can add a callback:
```
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);

    });

});
```

Putting it all together:

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);

            });

        });

    }

}