PHP Dropzone File Upload on Button Click

In this section, we are going to learn how to upload the file by clicking on the button in the PHP dropzone. We will use submit button to upload one or more files in PHP Dropzone.

When we upload one or more than one file using drag and drop, we usually use dropzone JS, but it will not work for us. Because when we choose a file or image, only then dropzone js will upload an image or file. In our below example, we will describe how to use PHP and Dropzone to upload all images or files on button click. We will use the library of dropzone.js to upload images and build multiple files. We will also use Bootstrap, which will help us to provide a very attractive and nice layout. We do import by using the dropzone.js cdn. We can also use our local to download it. In order to upload files on button click, we have to use some steps, which are described as follows:

Step 1:

In this step, we are going to create index.php file. We will use our root folder to create this file. In order to perform this, we are going to use the following code and put it on the index.php file. We will also use CDN for JS, JQuery, Dropzone CSS, and Bootstrap. For the execution of the button, we will write some click events. The image or file will be uploaded on the server when the button is clicked.

index.php:

<!DOCTYPE html>
<html>
<head>
  <title> File Upload on Button Click Using PHP Dropzone </title>
  <script src="http://demo.javatpoint.com/plugin/jquery.js"></script>
  <link rel="stylesheet" href="http://demo.javatpoint.com/plugin/bootstrap-3.min.css">
  <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> File Upload on Button Click Using PHP Dropzone </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>

Step 2:

In the second step, we are going to create Upload.php file. We will use our root directory to create this file. The file will be used to write the code of the image upload folder like this:

upload.php:

<?php

$uploadDir = 'uploads';

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

?>

Step 3:

This is the last step, and in this step, we are going to create Upload Folder. In our example, we need to store images. That's why we will create an upload folder. If we want to specify the different names from uploads, we can do this, but we should also be careful to change that name on the upload.php file.

Now our above code is ready, and we can run it. We will use our root folder to run the following command:

Now we will use our browser to open the following URL like this:

After this, the following output will be generated: