[Tut] File Upload using Dropzone with Progress Bar - Printable Version +- Sick Gaming (https://www.sickgaming.net) +-- Forum: Programming (https://www.sickgaming.net/forum-76.html) +--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html) +--- Thread: [Tut] File Upload using Dropzone with Progress Bar (/thread-101270.html) |
[Tut] File Upload using Dropzone with Progress Bar - xSicKxBot - 08-20-2023 [Tut] File Upload using Dropzone with Progress Bar <div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/08/file-upload-using-dropzone-with-progress-bar.jpg" width="550" height="367" title="" alt="" /></div><div><div class="modified-on" readability="7.0697674418605"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on June 30th, 2023.</div> <p>Most of the applications have the requirement to upload files to the server. In previous articles, we have seen a variety of file upload methods with valuable features.</p> <p>For example, we learned how to upload files with or without AJAX, validate the uploaded files, and more features.</p> <p>This tutorial will show how to <u>code for file uploading with a progress bar by Dropzone</u>.</p> <p><a class="demo" href="https://phppot.com/demo/dropzone-progress-bar/">View demo</a></p> <p>If the file size is significant, it will take a few nanoseconds to complete. <a href="https://phppot.com/php/ajax-file-upload-with-progress-bar-using-javascript/">Showing a progress bar during the file upload</a> is a user-friendly approach.</p> <p>To the extreme, websites start showing the progressing percentage of the upload. It is the best representation of showing that the upload request is in progress.</p> <p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-21232" src="https://phppot.com/wp-content/uploads/2023/06/dropzone-progress-bar-550x367.jpg" alt="dropzone progress bar" width="550" height="367" srcset="https://phppot.com/wp-content/uploads/2023/06/dropzone-progress-bar-550x367.jpg 550w, https://phppot.com/wp-content/uploads/2023/06/dropzone-progress-bar-300x200.jpg 300w, https://phppot.com/wp-content/uploads/2023/06/dropzone-progress-bar-768x512.jpg 768w, https://phppot.com/wp-content/uploads/2023/06/dropzone-progress-bar.jpg 1200w" sizes="(max-width: 550px) 100vw, 550px"></p> <h2>About Dropzone</h2> <p>The Dropzone is a JavaScript library popularly known for file uploading and related features. It has a vast market share compared to other such libraries.</p> <p>It provides a massive list of features. Some of the attractive features are listed below.</p> <ul> <li>It supports multi-file upload.</li> <li>It represents progressing state and percentage.</li> <li>It allows browser image resizing. It’s a valuable feature that supports <a href="https://phppot.com/css/image-editor-move-scale-skew-rotate-and-spin-with-css-transform/">inline editing of images</a>.</li> <li>Image previews in the form of thumbnails.</li> <li>It supports configuring the uploaded file’s type and size limit.</li> </ul> <h2>How to integrate dropzone.js to upload with the progress bar</h2> <p>Integrating Dropzone into an application is simple. It is all about keeping these two points during the integration.</p> <ol> <li>Mapping the UI element with the Dropzone initiation.</li> <li>Handling the upload event callbacks effectively.</li> </ol> <h2>Mapping the UI element with the Dropzone initiation</h2> <p>The below code has the HTML view to show the Dropzone file upload to the UI. It includes the Dropzone JS and the CSS via a CDN URL.</p> <pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html> <html> <head> <title>File Upload using Dropzone with Progress Bar</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css"> <style> .progress { width: 300px; border: 1px solid #ddd; padding: 5px; } .progress-bar { width: 0%; height: 20px; background-color: #4CAF50; } </style> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="form.css" /> </head> <body> <div class="phppot-container tile-container text-center"> <h2>File Upload using Dropzone with Progress Bar</h2> <form action="upload.php" class="dropzone" id="myDropzone"></form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script> </body> </html> </code></pre> <p>The file upload form element is mapped to the DropzoneJS while initiating the library.</p> <p>The form action targets the PHP endpoint to handle the file upload.</p> <pre class="prettyprint"><code class="language-php">Dropzone.options.myDropzone = { //Set upload properties init: function () { // Handle upload event callback functions }; }; </code></pre> <h2>Handling the upload event callbacks</h2> <p>This section has the Dropzone library script to include in the view. This script sets the file properties and limits to the upload process. Some of the properties are,</p> <ul> <li>maxFilesize – Maximum size allowed for the file to upload.</li> <li>paramName – File input name to access like $_FILE[‘paramName here’].</li> <li>maxFiles – File count allowed.</li> <li>acceptedFiles – File types or extensions allowed.</li> </ul> <p>The <strong>init</strong> property of this script allows handling the upload event. The event names are listed below.</p> <ul> <li>uploadprogress – To track the percentage of uploads to update the progress bar.</li> <li>success – When the file upload request is completed. This is as similar to a <a href="https://phppot.com/jquery/jquery-ajax-image-upload/">jQuery AJAX script</a>‘s success/error callbacks.</li> </ul> <p>Dropzone options have the upload form reference to listen to the file drop event. The callback function receives the upload status to update the UI.</p> <p>The dropzone calls the endpoint action when dropping the file into the drop area.</p> <p>The drop area will show thumbnails or a file preview with the progress bar.</p> <pre class="prettyprint"><code class="language-php">Dropzone.options.myDropzone = { paramName: "file", // filename handle to upload maxFilesize: 2, // MB maxFiles: 1, // number of files allowed to upload acceptedFiles: ".png, .jpg, .jpeg, .gif", // file types allowed to upload init: function () { this.on("uploadprogress", function (file, progress) { var progressBar = file.previewElement.querySelector(".progress-bar"); progressBar.style.width = progress + "%"; progressBar.innerHTML = progress + "%"; }); this.on("success", function (file, response) { var progressBar = file.previewElement.querySelector(".progress-bar"); progressBar.classList.add("bg-success"); progressBar.innerHTML = "Uploaded"; }); this.on("error", function (file, errorMessage) { var progressBar = file.previewElement.querySelector(".progress-bar"); progressBar.classList.add("bg-danger"); progressBar.innerHTML = errorMessage; }); } }; </code></pre> <h2>PHP file upload script</h2> <p>This a typical <a href="https://phppot.com/php/working-on-file-upload-using-php/">PHP file upload script</a> suite for any single file upload request. But, the dependent changes are,</p> <ol> <li>File handle name ($_FILES[‘File handle name’]).</li> <li>Target directory path for $uploadDir variable.</li> </ol> <pre class="prettyprint"><code class="language-php"><?php if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) { $file = $_FILES['file']; // file to be uploaded to this directory // should have sufficient file permissions $uploadDir = 'uploads/'; // unique file name generated for the uploaded file $fileName = uniqid() . '_' . $file['name']; // moving the uploaded file from temp directory to uploads directory if (move_uploaded_file($file['tmp_name'], $uploadDir . $fileName)) { echo 'File uploaded successfully.'; } else { echo 'Failed to upload file.'; } } </code></pre> <h2>How to hide the progress bar of uploaded files</h2> <p>By default, the Dropzone JS callback adds a <em>dz-complete</em> CSS class selector to the dropzone element. It will hide the progress bar from the preview after a successful upload.</p> <p>This default behavior is by changing the progress bar opacity to 0. But the markup will be there in the source. <a href="https://phppot.com/jquery/jquery-show-hide/">Element hide and show</a> can be done in various ways.</p> <p>If you want to remove the progress bar element from the HTML preview, use the JavaScript <em>remove()</em> function. This script calls it for the progress bar element on the success callback.</p> <pre class="prettyprint"><code class="language-php">Dropzone.options.myDropzone = { ... ... init: function () { ... ... this.on("success", function (file, response) { var progressBar = file.previewElement.querySelector(".progress-bar"); progressBar.remove(); }); ... ... } }; </code></pre> <p><a class="demo" href="https://phppot.com/demo/dropzone-progress-bar/">View demo</a> <a class="download" href="https://phppot.com/downloads/javascript/dropzone-progress-bar.zip">Download</a></p> <p> <!-- #comments --> </p> <div class="related-articles"> <h2>Popular Articles</h2> </p></div> <p> <a href="https://phppot.com/javascript/dropzone-progress-bar/#top" class="top">↑ Back to Top</a> </p> </div> https://www.sickgaming.net/blog/2023/06/19/file-upload-using-dropzone-with-progress-bar/ |