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(); }); } }); });
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>
Advertisement
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?