Uploading image with DropZone and other values via AJAX but calling SweetAlert when Submit Data

Question

I have a form with some fields (first name, last name and profile picture) that looks like this:

<form>
    <div class="row">
        <div class="col-lg-6">
            <label class="control-label">First Name:</label>
            <input class="form-control" type="text" placeholder="Enter first name.." id="firstName">

        </div>
        <div class="form-group col-lg-6">
            <label class="control-label">Last Name:</label>
            <input class="form-control" type="text" placeholder="Enter last name.." id="lastName"> 
        </div>
    </div> <!-- /row -->
    <div class="row">  
        <div class="form-group col-lg-6">
            <label class="control-label">profile picture:</label>
            <div class="dropzone dropzone-previews" id="profilbildDropzone">
                <div class="fallback">
                    <input name="file" type="file" multiple="multiple">
                </div>
            </div>
        </div>
    </div> <!-- /row -->
    <hr />
    <div class="form-action">
        <button type="button" class="btn btn-primary waves-effect waves-light" id="sweet-ajax">Submit Data</button>
    </div>
</form>

When the user clicks on submit data I call a Sweet-Alert dialog that asks if the user is sure about the action he tries. If he clicks yes I want to submit the data via AJAX to an PHP script that does all the rest (storing the image on the server, save the data in my database and so on):

<script type="text/javascript">
    SweetAlert.prototype.init = function () {
        //Ajax
        $('#sweet-ajax').click(function () {
            swal({
                title: "Sure?", 
                text: "Clicking on yes submits the data!", 
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes!",
                cancelButtonText: "Cancel",

                showLoaderOnConfirm: true,
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger m-l-10',
                preConfirm: function(givenData){
                    return new Promise(function(resolve, reject) {
                        setTimeout(function(){
                            inputNameFirst     = document.getElementById("firstName").value;
                            inputNameLast      = document.getElementById("lastName").value;

                            resolve()

                        }, 2000)
                    })
                },
                allowOutsideClick: false
            }).then(function(givenData){
                $.ajax({
                            type: "post",
                            url: "../assets/php/addUser.php",
                            data: {done: "success", fN: inputNameFirst, ln: inputNameLast},
                            dataType: 'JSON',
                            success: function(data) {
                                if(data.status === 'success'){
                                    swal({
                                        type: 'success',
                                        title: 'Good job!',
                                        html: 'all saved now!'
                                    })
                                }else if(data.status === 'error'){
                                    swal({ 
                                        type: 'error',
                                        title: 'Oh No!!',
                                        html: 'Nope sorry, there was an error: <br /><pre>'+ JSON.stringify(data) + '</pre>'
                                    })
                                }
                            }
                        })

            }, function(dismiss) {
                  // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
                  if (dismiss === 'cancel') {
                    swal(
                      'Got you!',
                      'Nothing changed. Good luck.',
                      'error'
                    )
                  }
              })

            });
     },    
        //init
        $.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
    }(window.jQuery),

    //initializing
    function ($) {
        "use strict";
        $.SweetAlert.init()
    }(window.jQuery);
</script>

I also set up the DropZone on my site so that I can also have optional fields in my form (from here):

jQuery(document).ready(function() {

    $("div#profilbildDropzone").dropzone({
        //store images in this directory
        url: "../assets/images/uploads",
        dictDefaultMessage: "Drop image here or click.",
        autoProcessQueue: false,
        maxFiles: 1,
        uploadMultiple: true,
        parallelUploads: 100,

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

            // First change the button to actually tell Dropzone to process the queue.
            this.element.querySelector("button#sweet-ajax").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });

            // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
            // of the sending event because uploadMultiple is set to true.
            this.on("sendingmultiple", function() {
                // Gets triggered when the form is actually being sent.
                // Hide the success button or the complete form.
            });
            this.on("successmultiple", function(files, response) {
                // Gets triggered when the files have successfully been sent.
                // Redirect user or notify of success.
            });
            this.on("errormultiple", function(files, response) {
                // Gets triggered when there was an error sending the files.
                // Maybe show form again, and notify user of error
            });
        } 
    });

});

But I do not get it how I upload the picture or give it so my php script. In this line:

this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
});

I'm supposed to upload the picture or what? Can I call this function inside my SWAL function or pass the data to my SWAL function where it gets send to the PHP script? Sadly I haven't found any usable example that gives me a clear hint on how I could solve this specific problem.

score 0 · Answer 1 · answered Aug 05 '18 at 12:56

You are not written logic send data via ajax to server side (i.e PHP). On click of the submit button you are telling Dropzone.js to processQueue(). But that itself will not post the data to the server via ajax.

On sendingmultiple event you need to get form data and assign it to formObject, then DropzoneJS will take care of posting data along file/image to the PHP.

init: function() {
    var myDropzone = this;  

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button#sweet-ajax").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
        // 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);
        });
    });
}

Next on the PHP server side get the posted data and files/images likes this.

<?php 
    //get form data
    echo '<pre>';print_r($_POST);echo '</pre>';
    //get posted files
    echo '<pre>';print_r($_FILES);echo '</pre>';
    exit;

Next write your logic upload files/images and also updating the database with posted data.

Also check I have written detailed tutorials on how to upload images with form data on button click using DropzoneJS and PHP via ajax.

Ajax Image Upload Using Dropzone.js with Normal Form Fields On Button Click Using PHP

Uploading image with DropZone and other values via AJAX but calling SweetAlert when Submit Data

1 Answers1