How to Upload a File Using Dropzone.js With PHP

index.php

<?php
$conn = mysqli_connect("localhost", "root", "", "dropzone");
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
} 
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Drag & Drop Using Dropzone With PHP</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/dropzone.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div id="main">
    <div class="container">
      <div class="row">
        <div class="col-md-7 div-center col-11">
          <div id="header">
            <h1>Drag & Drop Upload Files<br> Using Dropzone With PHP</h1>
          </div>
          <div id="content">
            <form class="dropzone" id="file_upload"></form>
            <button id="upload_btn">Upload</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php
  $swl = "select * from images WHERE ID='16'";
  $d = mysqli_query($conn, $swl);
  while ($row = mysqli_fetch_assoc($d)) {
    $img = $row['images'];
    $myArray = explode(',', $img);
    $string = preg_replace('/\s+/', '', $myArray);
  ?>
  <?php } ?>
 <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/dropzone.js"></script>
  <script>
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#file_upload", {
      url: "upload.php",
      parallelUploads: 3,
      uploadMultiple: true,
      acceptedFiles: '.png,.jpg,.jpeg',
      autoProcessQueue: false,
      success: function(file, response) {
        if (response == 'true') {
          $('#content .message').hide();
          $('#content').append('<div class="message success">Images Uploaded Successfully.</div>');
        } else {
          $('#content').append('<div class="message error">Images Can\'t Uploaded.</div>');
        }
      }
    });
    $('#upload_btn').click(function() {
      myDropzone.processQueue();
    });
  </script>
</body>
</html>

upload.php

<?php
    $conn = mysqli_connect("localhost", "root", "","dropzone");
    if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
  }

  if($_FILES['file']['name'] != ''){
    $file_names = '';
    $total = count($_FILES['file']['name']);
    for($i=0; $i<$total; $i++){
        $filename = $_FILES['file']['name'][$i];
        $extension = pathinfo($filename,PATHINFO_EXTENSION);
        $valid_extensions = array("png","jpg","jpeg");
        if(in_array($extension, $valid_extensions)){
            $new_name = rand() . ".". $extension;
            $path = "images/" . $new_name;
            move_uploaded_file($_FILES['file']['tmp_name'][$i], $path);
            $file_names .= $new_name . " , ";
        }else{
            echo 'false';
        }
    }
    $sql = "INSERT INTO images(images) VALUES('{$file_names}')";
    if(mysqli_query($conn,$sql)){
        echo 'true';
    }else{
        echo 'false';
    }
  }

style.css

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap');
body {
  font-family: 'Josefin Sans', sans-serif !important;
  padding: 0;
  margin: 0;
}
.center {
  text-align: center;
}

.div-center {
  margin: 0 auto;
  border: 1px solid #8b3d3d;
  padding: 0 !important;
}

#main {
  margin: 0 auto;
  margin-top: 25px;
}

#header {
  background: #8b3d3d !important;
  color: #fff;
  height: auto;
  padding: 25px;
}
h1 {
  line-height: 51px;
  font-size: 38px;
  text-align: center;
  margin: 0px;
  padding-top: 17px;
}

#content {
  min-height: 300px;
  padding: 50px;
}
form {
  margin: 0 0 10px;
}

#upload_btn {
  background: #8b3d3d;
  border: 1px solid #8b3d3d;
  outline: 0;
  padding: 8px 15px;
  margin: 0 0 10px;
  margin-top: 0px;
  color: #fff;
  font-size: 17px;
  border-radius: 0;
  cursor: pointer;
  width: 30%;
  margin-top: 25px;
}

#upload_btn:hover {
  background: transparent;
  color: #8b3d3d;
  transition: all 0.5s ease;
}

.message {
  color: #000;
  background-color: #e7e7e7;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.message.success {
  color: #000;
  background-color: #b0e9b0;
  border: 1px solid #6dce6d;
}

.message.error {
  color: #fff;
  background-color: #f37d7d;
  border: 1px solid #e91919;
}

Download

3.01 MB

How to Upload a File Using Dropzone.js With PHP - Atechseva

index.php

upload.php

style.css