Dropzone.js how to serialize values and send it?

Question

Im im totally stuck with Dropzone.js , i would like to create a drag and drop file upload

Setting it up is okay

<form id='test' enctype="multipart/form-data">
    <input type="text" name="album_name">
    <div id="myId" class="dropzone">

    </div>
    <button type="submit" id="newAlbum">go go</button>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("#myId").dropzone({ 
        paramName: 'photos',
        url: "post.php",
        dictDefaultMessage: "Drag your images",
        clickable: true,
        enqueueForUpload: true,

        selectedfiles: function()
        {
            $('#newAlbum').show();
        }
    });

});
</script>

But i have no clue hot to serialize the form, and send it

Could please someone show me an example?

Answer 1

If enqueueForUpload is set to true (default), the files get uploaded directly as in a normal file-upload form.

In your case, you need to have your upload-script in post.php . There, the file will come in as $_FILES['photos'] ( paramName ). This paremeter name is 'file' by default, but you set it different.

Is this clear?

So a simple example as for the content of your post.php -file:

if(!empty($_FILES)){
   move_uploaded_file($_FILES['photos']['tmp_name'],'http://mysite.com/myDir');
}

Answer 2

if input Outside Form you can add value to form

<input type="text" name="album_name">    
<form id='test' enctype="multipart/form-data">    
    <div id="myId" class="dropzone">

    </div>
    <button type="submit" id="newAlbum">go go</button>
</form>
<script type="text/javascript">
    Dropzone.autoDiscover = false;

    jQuery(function() {

        var myDropzone = new Dropzone("#test",{
            url: "post.php",
            addRemoveLinks: true,
            maxFilesize: 1,
            maxFiles: 5,
            uploadMultiple: false,
            parallelUploads: 100,
            createImageThumbnails: true,
            paramName: "photos",
            autoProcessQueue: false
        });

        var submitButton = document.querySelector("#newAlbum");
        submitButton.addEventListener("click", function() {

            myDropzone.on("sending", function(file, xhr, formData) {
                formData.append("album_name", $("input[name=album_name]").val());    
            });
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
            alert('show this to have time to upload');
        });

    });
</script>