08-20-2023, 08:35 PM
[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/20...00x200.jpg 300w, https://phppot.com/wp-content/uploads/20...68x512.jpg 768w, https://phppot.com/wp-content/uploads/20...ss-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/...gress-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/20...00x200.jpg 300w, https://phppot.com/wp-content/uploads/20...68x512.jpg 768w, https://phppot.com/wp-content/uploads/20...ss-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/...gress-bar/