PHP Dropzone File Upload Tutorial Example

PHP Dropzone File Upload Tutorial Example

PHP drag and drop upload file using dropzone js. In this tutorial, you will learn how to upload files using dropzone js in PHP without refresh the whole web page.

Note that, Always prefer to use dropzone js for drag and drop multiple file uploading into directory and database.

And you will learn step by step how to integrate dropzone js in PHP with html. And upload multiple file with drag and drop feature.

How to Upload a File Using Dropzone.js In PHP

Follow following the below steps and upload file using dropzone js and jquery without refreshing the whole web page in PHP:

  • Step 1 – Create index.php
  • Step 2 – Create upload.php
  • Step 3 – Create Directory

Step 1 – Create index.php

First of all, create an index.php file and update the below HTML code into your index.php file.

<!DOCTYPE html>
<html>
<head>
  <title>PHP Dropzone File Upload Example Tutorial</title>
  <!-- Bootstrap Css -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>PHP Dropzone File Upload on Button Click Example</h2>
      <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
        <div>
          <h3>Upload Multiple Image By Click On Box</h3>
        </div>
      </form>
      <button id="uploadFile">Upload Files</button>
    </div>
  </div>
</div>
  
<script type="text/javascript">
  
    Dropzone.autoDiscover = false;
  
    var myDropzone = new Dropzone(".dropzone", { 
       autoProcessQueue: false,
       maxFilesize: 1,
       acceptedFiles: ".jpeg,.jpg,.png,.gif"
    });
  
    $('#uploadFile').click(function(){
       myDropzone.processQueue();
    });
      
</script>
  
</body>
</html>

This HTML code shows the image upload form, so using this form you can upload the images on the DB table and project folder.

Step 2 – Create upload.php

In this step, create a new file name upload.php file and update the below code into your upload.php file.

<?php


$uploadDir = 'uploads';


if (!empty($_FILES)) {
 $tmpFile = $_FILES['file']['tmp_name'];
 $filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);
}


?>

This PHP code will upload file into project directory.

Step 3 – Create Directory

In this step, you need to create a directory into your project directory, which named uploads.

Conclusion

In this tutorial, you have learned how to upload files using dropzone js in PHP without refresh the whole web page.

Recommended PHP Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *