How to Drag and Drop Image Upload in PHP with MySQL?


Share:
 | Published By: Admin | Published On: Apr 13, 2022 | Category: PHP


Hello dev,

I am going to explain you drag and drop image upload in PHP MySQL example. You will learn image upload and store in PHP database. This article will give you simple example of drag and drop image upload in PHP.

I will give you simple example of drag and drop multiple image upload in PHP. This is the examle of drag and drop image upload using PHP.

So, let's see bellow solution:

connect.php
<?php
    $host = "localhost";
    $dbuser = "root";
    $dbpass = "";
    $dbname = "draganddrop";

    $conn = new mysqli($host, $dbuser, $dbpass, $dbname);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
?>
index.php
<!DOCTYPE html>
<html>
<head>
    <title>How to Drag and Drop Image Upload in PHP with MySQL? - Mywebtuts.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="row">
                <div class="col-md-12">
                    <div class="card-header text-center">
                        <h3>How to Drag and Drop Image Upload in PHP with MySQL? - Mywebtuts.com</h3>
                    </div>
                    <div class="card-body mt-2">
                        <form action="upload.php" enctype="multipart/form-data" name="img" class="dropzone" id="image-upload">
                            <div class="mt-2"></div>
                        </form>
                        <div class="text-center">
                            <input type="button" name="submit" value="submit" id="submit" class="btn btn-primary mt-3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
    <script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize:1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
    </script>
</body>
</html>

upload.php
<?php
    if(!empty($_FILES)){ 
        require 'connect.php'; 
         
        $uploadDir = "uploads/"; 
        $fileName = basename($_FILES['file']['name']); 
        $uploadFilePath = $uploadDir.$fileName; 
         
        if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFilePath)){ 
            $sql = "INSERT INTO images (image, uploaded_on) VALUES ('".$fileName."', NOW())"; 
            $insert = $conn->query($sql);
        } 
    } 
?>
Output:

I hope it will help you...
Share: