{"id":134137,"date":"2023-06-19T05:11:39","date_gmt":"2023-06-19T05:11:39","guid":{"rendered":"https:\/\/phppot.com\/?p=21005"},"modified":"2023-06-19T05:11:39","modified_gmt":"2023-06-19T05:11:39","slug":"file-upload-using-dropzone-with-progress-bar","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/06\/19\/file-upload-using-dropzone-with-progress-bar\/","title":{"rendered":"File Upload using Dropzone with Progress Bar"},"content":{"rendered":"<div class=\"modified-on\" readability=\"7.0697674418605\"> by <a href=\"https:\/\/phppot.com\/about\/\">Vincy<\/a>. Last modified on June 30th, 2023.<\/div>\n<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>\n<p>For example, we learned how to upload files with or without AJAX, validate the uploaded files, and more features.<\/p>\n<p>This tutorial will show how to <u>code for file uploading with a progress bar by Dropzone<\/u>.<\/p>\n<p><a class=\"demo\" href=\"https:\/\/phppot.com\/demo\/dropzone-progress-bar\/\">View demo<\/a><\/p>\n<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>\n<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>\n<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=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<h2>About Dropzone<\/h2>\n<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>\n<p>It provides a massive list of features. Some of the attractive features are listed below.<\/p>\n<ul>\n<li>It supports multi-file upload.<\/li>\n<li>It represents progressing state and percentage.<\/li>\n<li>It allows browser image resizing. It\u2019s 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>\n<li>Image previews in the form of thumbnails.<\/li>\n<li>It supports configuring the uploaded file\u2019s type and size limit.<\/li>\n<\/ul>\n<h2>How to integrate dropzone.js to upload with the progress bar<\/h2>\n<p>Integrating Dropzone into an application is simple. It is all about keeping these two points during the integration.<\/p>\n<ol>\n<li>Mapping the UI element with the Dropzone initiation.<\/li>\n<li>Handling the upload event callbacks effectively.<\/li>\n<\/ol>\n<h2>Mapping the UI element with the Dropzone initiation<\/h2>\n<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>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;!DOCTYPE html&gt;\n&lt;html&gt; &lt;head&gt; &lt;title&gt;File Upload using Dropzone with Progress Bar&lt;\/title&gt; &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dropzone\/5.9.2\/dropzone.min.css\"&gt; &lt;style&gt; .progress { width: 300px; border: 1px solid #ddd; padding: 5px; } .progress-bar { width: 0%; height: 20px; background-color: #4CAF50; } &lt;\/style&gt; &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/&gt; &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"form.css\" \/&gt;\n&lt;\/head&gt; &lt;body&gt; &lt;div class=\"phppot-container tile-container text-center\"&gt; &lt;h2&gt;File Upload using Dropzone with Progress Bar&lt;\/h2&gt; &lt;form action=\"upload.php\" class=\"dropzone\" id=\"myDropzone\"&gt;&lt;\/form&gt; &lt;\/div&gt; &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dropzone\/5.9.2\/min\/dropzone.min.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt; &lt;\/html&gt;\n<\/code><\/pre>\n<p>The file upload form element is mapped to the DropzoneJS while initiating the library.<\/p>\n<p>The form action targets the PHP endpoint to handle the file upload.<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php\">Dropzone.options.myDropzone = { \/\/Set upload properties init: function () { \/\/ Handle upload event callback functions }; };\n<\/code><\/pre>\n<h2>Handling the upload event callbacks<\/h2>\n<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>\n<ul>\n<li>maxFilesize \u2013 Maximum size allowed for the file to upload.<\/li>\n<li>paramName \u2013 File input name to access like $_FILE[\u2018paramName here\u2019].<\/li>\n<li>maxFiles \u2013 File count allowed.<\/li>\n<li>acceptedFiles \u2013 File types or extensions allowed.<\/li>\n<\/ul>\n<p>The <strong>init<\/strong> property of this script allows handling the upload event. The event names are listed below.<\/p>\n<ul>\n<li>uploadprogress \u2013 To track the percentage of uploads to update the progress bar.<\/li>\n<li>success \u2013 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>\u2018s success\/error callbacks.<\/li>\n<\/ul>\n<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>\n<p>The dropzone calls the endpoint action when dropping the file into the drop area.<\/p>\n<p>The drop area will show thumbnails or a file preview with the progress bar.<\/p>\n<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; }); } };\n<\/code><\/pre>\n<h2>PHP file upload script<\/h2>\n<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>\n<ol>\n<li>File handle name ($_FILES[\u2018File handle name\u2019]).<\/li>\n<li>Target directory path for $uploadDir variable.<\/li>\n<\/ol>\n<pre class=\"prettyprint\"><code class=\"language-php\">&lt;?php if ($_SERVER['REQUEST_METHOD'] === 'POST' &amp;&amp; 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.'; }\n}\n<\/code><\/pre>\n<h2>How to hide the progress bar of uploaded files<\/h2>\n<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>\n<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>\n<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>\n<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(); }); ... ... }\n};\n<\/code><\/pre>\n<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>\n<p> <!-- #comments --> <\/p>\n<div class=\"related-articles\">\n<h2>Popular Articles<\/h2>\n<\/p><\/div>\n<p> <a href=\"https:\/\/phppot.com\/javascript\/dropzone-progress-bar\/#top\" class=\"top\">\u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Vincy. Last modified on June 30th, 2023. 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. For example, we learned how to upload files with or without AJAX, validate the uploaded files, and more features. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":134138,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-134137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/134137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=134137"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/134137\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/134138"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=134137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=134137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=134137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}