Dropzone upload all in one array using serialize

Question

The problem is everytime I hit the upload button to saved all images in database it will saved one by one. Ex: I upload two images on dropzone and submit it..the data will be saved in database is two column which is wrong what I want to display is only one column with multiple images. Hoping you can help me with these. Thanks ahead!

Dropzone js code:

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });

  }
};

HTML:

<button id="submit-all">Submit all files</button>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>

My php code:

<?php
if(!empty($_FILES)){

        $targetDir = "../drop/../images/";
        $fileName = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $img = $_FILES['file']['name'];
        $img_name = $id . "_" . uniqid() . "_" . ($_POST['default_pic'] == $img ? "1" : "0") . "." . $fileName;
        $targetFile = $targetDir.basename($img_name);

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

            $new_data = array("cover" => ($_POST['default_pic'] == $img ? "1" : "0"), "img" => $img_name); 
            $new_array[] = $new_data;

            $data_serialize = serialize($new_array);
            //insert file information into db table
            $mysqli->query("INSERT INTO files (file_name, uploaded) VALUES('".$data_serialize."','".date("Y-m-d H:i:s")."')");
            //$new_id = $mysqli->insert_id;
    }

}
?>

I assume you mean one row, Can you explain with more detail the way the files should end up stored in the database? — wallek876
– wallek876, Commented Nov 7, 2015 at 8:17
@wallek876 It should saved in database in one id with multiple images that's why I used serialized function to combine them all in one id. see this correct output sample. a:2:{i:0;a:2:{s:5:"cover";s:1:"1";s:3:"img";s:22:"17_55d58456570d5_1.jpg";}i:1;a:2:{s:5:"cover";s:1:"0";s:3:"img";s:22:"17_55d5845706396_0.jpg";}} <-- this output should saved in databased not one image only — cachess
– cachess, Commented Nov 9, 2015 at 2:37
Then clearly the problem is the way you are handling the uploaded files in server side, i don't think you really understand how $_FILES is structured, I'll update the answer. — wallek876
– wallek876, Commented Nov 9, 2015 at 7:58
okay sir I will wait for your answer let's see if its work! thanks for you effort. :) @wallek876 — cachess
– cachess, Commented Nov 9, 2015 at 8:11
sir thank you so much it saves my time to work on these. thank u for your effort now it display correctly :) @wallek876 — cachess
– cachess, Commented Nov 9, 2015 at 8:22

Community · Accepted Answer · 2017-05-23 12:03:56Z

Thats because dropzone uploads the files separately by default, sending each one individually in separated requests, to upload all queued files at once use the dropzone option:

uploadMultiple: true

This way the files will be uploaded together as an array.

Example:

Dropzone.options.myDropzone = {
    autoProcessQueue: false,
    uploadMultiple: true,
    init: function () {
        var submitButton = document.querySelector("#submit-all");
        myDropzone = this; 
        submitButton.addEventListener("click", function () {
            myDropzone.processQueue(); 
        });
        this.on("success", function(file){
            console.log(file.xhr.response);
        });
    }
};

Once in the server side you are not handling correctly the $_FILES variable, i am not going to explain here how $_FILES works, but here are some interesting links: 1, 2.

Since `$_FILES is a multidimensional array with an unintuitive structure you need to loop several times trough it, in order to accomplish what you are trying to do.

Here an example on the server side, i just hardcoded some values because i really don't know what they must be. also the printed information is just to see in the browser console the process:

<?php
    if(!empty($_FILES)){
        // Harcoded values
        $id=99;
        $_POST["default_pic"] = $_FILES["file"]["name"][0];

        print("ORIGINAL STRUCTURE OF \$_FILES:\n");
        print_r($_FILES);
        $myfiles = array();
        foreach(array_keys($_FILES["file"]['name']) as $i) { // loop over 0,1,2,3 etc...
            foreach(array_keys($_FILES["file"]) as $j) { // loop over 'name', 'size', 'error', etc...
                $myfiles[$i][$j] = $_FILES["file"][$j][$i]; // "swap" keys and copy over original array values
            }
        }
        print("RESULT STRUCTURE OF THE MANIPULATED \$_FILES:\n");
        print_r($myfiles);
        $targetDir = "../drop/../images/";
        $myimages = array();

        foreach($myfiles as $single_image) {
            $extension = pathinfo($single_image["name"], PATHINFO_EXTENSION);
            $img = $single_image["name"];
            $img_name = $id . "_" . uniqid() . "_" . ($_POST['default_pic'] == $img ? "1" : "0") . "." . $extension;
            $targetFile = $targetDir.basename($img_name);
            if (move_uploaded_file($single_image["tmp_name"], $targetFile)){
                $myimages[] = array("cover" => ($_POST['default_pic'] == $img ? "1" : "0"), "img" => $img_name);
            }
        }
        $data_serialize = serialize($myimages);
        print("SERIALIZED DATA:\n");
        print($data_serialize);
    }

Collectives™ on Stack Overflow

Dropzone upload all in one array using serialize

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related