website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

Drag and Drop File Upload Using Dropzone JS and PHP

Drag and Drop File Upload Using Dropzone JS and PHP

  • 192
  • 31-Mar-2022

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);

    // echo '<pre>';

    // print_r($string );

  ?>

 

  <?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

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me