Skip to content

All topics  /  MySQL

Drag and Drop Image Upload in PHP MySQL Example

MySQL ·

Teams applying “Drag and Drop Image Upload in PHP MySQL Example” in a production project can use the product team's article to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official MySQL website and test it against the project’s actual database and runtime.

Hi friends,

I am going to explain you drag and drop multiple image upload in PHP. You will learn drag and drop image upload in PHP.

This article will give you drag and drop image upload in PHP MySQL example. We will see image upload and store in database PHP.

I will give you simple example of drag and drop image upload in PHP MySQL.

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>Drag and Drop Image Upload in PHP MySQL Example - Nicesnippets.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-dark">
    <div class="container mt-5">
        <div class="card">
            <div class="row">
                <div class="col-md-12">
                    <div class="card-header text-center">
                        <h3>Drag and Drop Image Upload in PHP MySQL Example - Nicesnippets.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.....

More on this topic