How to upload file using Dropzone

Upload image using Dropzone

Dropzone is powerful and easy to use JS library. it's works without call any JS. Dropzone works client side, so it's doesn't load server bandwidth.

Download and include Dropzone.

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

Add above dropzone JS inside head and after body add below code.

Create HTML container

<div class='content'>
             <form action="upload.php" class="dropzone" id="dropzonewidget">
 
             </form> 
             <button id="uploadfilebtn">Upload Files</button>
         </div> 

Call HTML block using dropzone js.

<script type="text/javascript">
   
    Dropzone.autoDiscover = false;
   
    var myDropzone = new Dropzone(".dropzone", { 
       autoProcessQueue: false,
	   addRemoveLinks: true
	   
    });
   
    $('#uploadfilebtn').click(function(){
       myDropzone.processQueue();
    });
       
</script>

Now, If you want to move file to server use PHP move_uploaded_file function to achieve this. for more detail tutorial check this website