multiple dropzone upload on 1 single line mysql

I’m trying to upload multiple files at the same time and insert the file paths on 1 single mysql line per upload, but this adds one line per file.

Looks to me like my js dropzone setup is good but it doesn’t work on a single line but it adds one line per file in the database

Thank you for your help. (excuse me but i’m French)

My js:

/*DROPZONE*/

Dropzone.autoDiscover = false;

$(document).ready(function() {
    $("#divDropzone").dropzone({
        url: 'image-add.php',
        parallelUploads: 100,
        paramName: 'file',
        maxFiles: 3,
        maxFilesize: 1.5,
        dictDefaultMessage: 'Drop files here to upload...',
        uploadMultiple: true,
        // processingmultiple: true,
        // resizeWidth: 150,
        // resizeHeight: 150,
        // resizeMethod: "contain",
        acceptedFiles: 'image/png,image/gif,image/jpg,image/jpeg,image/bmp,image/x-icon,image/svg+xml,image/tiff,application/pdf,application/pdf,application/msword,application/vnd.openxmlformats-officewordprocessingml.document,application/vnd.oasis.openspreadsheet,application/vnd.oasis.opentext,application/vnd.ms-powerpoint,application/vnd.ms-excel,application/vnd.openxmlformats-officespreadsheetml.sheet',
        autoProcessQueue: false,
        addRemoveLinks: true,
        dictRemoveFile: 'Remove',
        dictMaxFilesExceeded: 'You can only upload 3 files please delete some !',
        dictFileTooBig: 'File too large, up to 1 MB per file !',
        dictInvalidFileType: 'Invalid file only images and Microsoft Office Documents are accepted !',

        init: function() {
            myDropzone = this;
            $("#uploadBtn").click(function(e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
        }
    });
});

JavaScript
​x
 
/*DROPZONE*/​Dropzone.autoDiscover = false;​$(document).ready(function() {    $("#divDropzone").dropzone({        url: 'image-add.php',        parallelUploads: 100,        paramName: 'file',        maxFiles: 3,        maxFilesize: 1.5,        dictDefaultMessage: 'Drop files here to upload...',        uploadMultiple: true,        // processingmultiple: true,        // resizeWidth: 150,        // resizeHeight: 150,        // resizeMethod: "contain",        acceptedFiles: 'image/png,image/gif,image/jpg,image/jpeg,image/bmp,image/x-icon,image/svg+xml,image/tiff,application/pdf,application/pdf,application/msword,application/vnd.openxmlformats-officewordprocessingml.document,application/vnd.oasis.openspreadsheet,application/vnd.oasis.opentext,application/vnd.ms-powerpoint,application/vnd.ms-excel,application/vnd.openxmlformats-officespreadsheetml.sheet',        autoProcessQueue: false,        addRemoveLinks: true,        dictRemoveFile: 'Remove',        dictMaxFilesExceeded: 'You can only upload 3 files please delete some !',        dictFileTooBig: 'File too large, up to 1 MB per file !',        dictInvalidFileType: 'Invalid file only images and Microsoft Office Documents are accepted !',​        init: function() {            myDropzone = this;            $("#uploadBtn").click(function(e) {                e.preventDefault();                e.stopPropagation();                myDropzone.processQueue();            });        }    });});​

My php with my html:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

    // Database
    include 'db.php'; 

    if (! empty($_FILES)) {
        
        $uploadsDir = "uploads/";
        $allowedFileType = array('jpg','png','jpeg','pdf','jfif','psd','doc','docx','xls','xlsx');
        $uniqueName = md5(uniqid(rand(), true));
        $separator = '---';
        
        // Validate if files exist
        if (!empty(array_filter($_FILES['file']['name']))) {
            
            // Loop through file items
            foreach($_FILES['file']['name'] as $id=>$val){
                // Get files upload path
                $fileName        = $_FILES['file']['name'][$id];
                $tempFile        = $_FILES['file']['tmp_name'][$id];
                $targetFilePath  = $uploadsDir . $uniqueName . $separator . $fileName;
                $fileType        = strtolower(pathinfo($targetFilePath, PATHINFO_EXTENSION));
                $uploadDate      = date('Y-m-d H:i:s');

                if(in_array($fileType, $allowedFileType)){
                        if(move_uploaded_file($tempFile, $targetFilePath)){
                            $sqlVal = "('".$targetFilePath."', '".$uploadDate."')";
                        } 
                   } 
                // Add into MySQL database
                if(!empty($sqlVal)) {
                    $insert = $conn->query("INSERT INTO infos_devis (image_path, date_time) VALUES $sqlVal");
                }
            }

        } 
    } 
?>
<html>
    <head>
        <title>Add New Image</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" href="dropzone/dropzone.css" />
    </head>
    <body>
        <div class="container">
            <form name="frmImage" action="image-add.php?action=save" class="dropzone" id="divDropzone">
        </form>
            <button class="btn btn-primary text-white" id="uploadBtn">Upload</button>
            <div class="btn-menu">
                <a href="index.php" class="link">Back to List</a>
            </div>     
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="dropzone/dropzone.js"></script>
        <script src="script.js"></script>
    </body>
</html>

JavaScript
 
<?phperror_reporting(E_ALL);ini_set('display_errors', 1);​    // Database    include 'db.php'; ​    if (! empty($_FILES)) {                $uploadsDir = "uploads/";        $allowedFileType = array('jpg','png','jpeg','pdf','jfif','psd','doc','docx','xls','xlsx');        $uniqueName = md5(uniqid(rand(), true));        $separator = '---';                // Validate if files exist        if (!empty(array_filter($_FILES['file']['name']))) {                        // Loop through file items            foreach($_FILES['file']['name'] as $id=>$val){                // Get files upload path                $fileName        = $_FILES['file']['name'][$id];                $tempFile        = $_FILES['file']['tmp_name'][$id];                $targetFilePath  = $uploadsDir . $uniqueName . $separator . $fileName;                $fileType        = strtolower(pathinfo($targetFilePath, PATHINFO_EXTENSION));                $uploadDate      = date('Y-m-d H:i:s');​                if(in_array($fileType, $allowedFileType)){                        if(move_uploaded_file($tempFile, $targetFilePath)){                            $sqlVal = "('".$targetFilePath."', '".$uploadDate."')";                        }                    }                 // Add into MySQL database                if(!empty($sqlVal)) {                    $insert = $conn->query("INSERT INTO infos_devis (image_path, date_time) VALUES $sqlVal");                }            }​        }     } ?><html>    <head>        <title>Add New Image</title>        <meta name="viewport" content="width=device-width, initial-scale=1">        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">        <link rel="stylesheet" type="text/css" href="css/styles.css" />        <link rel="stylesheet" type="text/css" href="dropzone/dropzone.css" />    </head>    <body>        <div class="container">            <form name="frmImage" action="image-add.php?action=save" class="dropzone" id="divDropzone">        </form>            <button class="btn btn-primary text-white" id="uploadBtn">Upload</button>            <div class="btn-menu">                <a href="index.php" class="link">Back to List</a>            </div>             </div>​        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        <script type="text/javascript" src="dropzone/dropzone.js"></script>        <script src="script.js"></script>    </body></html>​

Answer

Looks to me like my js dropzone setup is good but it doesn’t work on a single line but it adds one line per file in the database

YES as @ADyson already commented THIS IS THE WAY IT SHOULD BE! 😉

The PHP file is CALLED ONCE PER FILE from Dropzone!

So if you have 5 files Dropzone will call the PHP file 5 times and each time hand over the file data.. and of course the php file will create a database entry each time.

BUT there IS a solution to change this: How to upload multiple files using dropzone.js?

Advertisement

Answer