Having problem with uploading multiple files in one request using dropzone

Question

Am trying to update user image database column using dropzone plugin in one request but when i set uploadMultiple to true is not working no image move to folder neither database. But when i set it to false only last image name move to user image column but all images move to folder.

Thanks in advance

Here is my code

 Dropzone.options.mydropzone =
  {
      autoProcessQueue: false,
     addRemoveLinks: true,
      dictMaxFilesExceeded: "Maximum upload limit reached",
       dictInvalidFileType: "upload only JPG/PNG/JPEG/GIF/BMP",
    acceptedFiles: '.png,.jpg,.jpeg,.gif,.bmp',
        parallelUploads: 10,
          // uploadMultiple: true,
     init: function ()
    {
      var submitButton = document.querySelector('#letupload');
       myDropzone = this;


        submitButton.addEventListener("click", function(){
           myDropzone.processQueue();
        });


       this.on("complete", function(){
      if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) 
      {
        var _this = this;
        _this.removeAllFiles();
      }
      //console.log(this.getUploadingFiles());
    });

    },

  };

Server Side

if (!empty($_FILES)) {

  $temp_file = $_FILES['file']['tmp_name'];
  $targetDir = '../../user_images/';
  $filename = rand().$_FILES['file']['name'];
  $targetFile = $targetDir.$filename;


 if (move_uploaded_file($temp_file, $targetFile)) {

      $sql="UPDATE img SET Image='$filename' WHERE User_id = '$memberid' ";//
if(!$qsql=mysqli_query($con,$sql))
{
  echo mysqli_error($con);
}

  } 


}

After follow Mohammed link every images to to destination folder but only last image save into that database Below is my new server side code

if (!empty($_FILES)) {


foreach($_FILES['file']['tmp_name'] as $key => $value) {
        $temp_file = $_FILES['file']['tmp_name'][$key];
        $targetDir = '../../user_images/';
        $filename = rand().$_FILES['file']['name'][$key];
        $targetFile =  $targetDir.$filename;

        if (move_uploaded_file($temp_file,$targetFile)) {
         $sql="UPDATE img SET Image='$filename' WHERE User_id = '$memberid' ";//
        if(!$qsql=mysqli_query($con,$sql))
        {
          echo mysqli_error($con);
        }
        }
    }

}

take a look here : gist.github.com/kreativan/83febc214d923eea34cc6f557e89f26c — Yassine CHABLI
– Yassine CHABLI, Commented Mar 29, 2019 at 10:46
Thanks @MohammedYassineCHABLI it working now all images move to destination folder but only one image name insert it to database — Adedeji Sikiru Da Webcoded
– Adedeji Sikiru Da Webcoded, Commented Mar 29, 2019 at 11:09
update your answser with the new code please to see where is the problem — Yassine CHABLI
– Yassine CHABLI, Commented Mar 29, 2019 at 11:35

Yassine CHABLI · Accepted Answer · 2019-03-29 14:23:57Z

You are updating at each iteration , so the value at the end of script will be the name of the last image uploaded , so there is a way to solve this issue trying this snippet of code :

Insert into an array (i nammed id $images) the file name of uploaded files.
convert array into spring separated by comma , using implode function .(i used the same variable $images).
update the row with images name .

Code example :

if (!empty($_FILES)) {
   $images=array[];
  foreach($_FILES['file']['tmp_name'] as $key => $value) {
      $temp_file = $_FILES['file']['tmp_name'][$key];
      $targetDir = '../../user_images/';
      $filename = rand().$_FILES['file']['name'][$key];
      $targetFile =  $targetDir.$filename;
      if (move_uploaded_file($temp_file,$targetFile)) {
         $images[]= $filename;
      }
  }
  $images = implode(',',$images);
  $sql="UPDATE img SET Image='$images' WHERE User_id = '$memberid' ";//
  if(!$qsql=mysqli_query($con,$sql)){
     echo mysqli_error($con);
  }

}

Hope this help you .

Adedeji Sikiru Da Webcoded · Accepted Answer · 2019-03-29 14:10:08Z

Thanks to @Mohammed after I try your code, the problem of saving images name into database still persist, I now discover that you declare empty array inside the foreach so below is the working code

Dropzone Js

  Dropzone.options.mydropzone =
  {

    autoProcessQueue: false,
     addRemoveLinks: true,
      dictMaxFilesExceeded: "Maximum upload limit reached",
       dictInvalidFileType: "upload only JPG/PNG/JPEG/GIF/BMP",
    acceptedFiles: '.png,.jpg,.jpeg,.gif,.bmp',
        parallelUploads: 10,
          uploadMultiple: true,
     init: function ()
    {
      var submitButton = document.querySelector('#letupload');
       myDropzone = this;


        submitButton.addEventListener("click", function(){
           myDropzone.processQueue();
        });

      this.on("complete", function(file, response){
      if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) 
      {
        var _this = this;
        _this.removeAllFiles();
      }
      console.log(this.getUploadingFiles());
    });

    },


  };

Server Side

if (!empty($_FILES)) {

$empty_img_arr=array();
foreach($_FILES['file']['tmp_name'] as $key => $value) {
      $temp_file = $_FILES['file']['tmp_name'][$key];
      $targetDir = '../../user_images/';
      $filename = rand().$_FILES['file']['name'][$key];
      $targetFile =  $targetDir.$filename;

      if (move_uploaded_file($temp_file,$targetFile)) {


       $empty_img_arr[]= $filename;

       $image = implode(',',$empty_img_arr);
    $sql="UPDATE img SET Image='$image' WHERE User_id = '$memberid' ";//
      if(!$qsql=mysqli_query($con,$sql))
      {
        echo mysqli_error($con);
      }

      }
  }

}

Thanks so much really appreciate

Collectives™ on Stack Overflow

Having problem with uploading multiple files in one request using dropzone

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related