-1

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>
TBA
  • 49
  • 5
  • Why on earth would you want them all on one row in the database? That's the opposite of good design. One of the first rules you (should have) learned when studying relational database design is that you never store multiple values in the same column in one row. And another is that you rarely should have multiple columns storing instances of the same type of data in a table - both of these would be signs that the data is denormalised – ADyson Jan 04 '21 at 19:11

1 Answers1

1

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?

Alexander Dobernig
  • 753
  • 6
  • 21