Having problem with uploading multiple files in one request using dropzone - php

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

Answer 1

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 .

Answer 2

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