{"id":3657,"date":"2022-10-08T00:38:12","date_gmt":"2022-10-07T19:38:12","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3657"},"modified":"2022-10-08T00:39:15","modified_gmt":"2022-10-07T19:39:15","slug":"file-upload-with-progress-bar-html5-css3-javascript-php","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/","title":{"rendered":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP"},"content":{"rendered":"\n

In this tutorial, I will teach you\u00a0how to upload files with a progress bar<\/strong>\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File Upload with Progress Bar<\/strong> project is given below.<\/p>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>File Upload with Progress Bar<\/title>\n  <link rel="stylesheet" href="style.css">\n  <link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css"\/>\n<\/head>\n<body>\n  <div class="wrapper">\n    <header>File Uploader JavaScript<\/header>\n    <form action="#">\n      <input class="file-input" type="file" name="file" hidden>\n      <i class="fas fa-cloud-upload-alt"><\/i>\n      <p>Browse File to Upload<\/p>\n    <\/form>\n    <section class="progress-area"><\/section>\n    <section class="uploaded-area"><\/section>\n  <\/div>\n\n  <script src="script.js"><\/script>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const form = document.querySelector("form"),\nfileInput = document.querySelector(".file-input"),\nprogressArea = document.querySelector(".progress-area"),\nuploadedArea = document.querySelector(".uploaded-area");\n\n\/\/ form click event\nform.addEventListener("click", () =>{\n  fileInput.click();\n});\n\nfileInput.onchange = ({target})=>{\n  let file = target.files[0]; \/\/getting file [0] this means if user has selected multiple files then get first one only\n  if(file){\n    let fileName = file.name; \/\/getting file name\n    if(fileName.length >= 12){ \/\/if file name length is greater than 12 then split it and add ...\n      let splitName = fileName.split('.');\n      fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];\n    }\n    uploadFile(fileName); \/\/calling uploadFile with passing file name as an argument\n  }\n}\n\n\/\/ file upload function\nfunction uploadFile(name){\n  let xhr = new XMLHttpRequest(); \/\/creating new xhr object (AJAX)\n  xhr.open("POST", "php\/upload.php"); \/\/sending post request to the specified URL\n  xhr.upload.addEventListener("progress", ({loaded, total}) =>{ \/\/file uploading progress event\n    let fileLoaded = Math.floor((loaded \/ total) * 100);  \/\/getting percentage of loaded file size\n    let fileTotal = Math.floor(total \/ 1000); \/\/gettting total file size in KB from bytes\n    let fileSize;\n    \/\/ if file size is less than 1024 then add only KB else convert this KB into MB\n    (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded \/ (1024*1024)).toFixed(2) + " MB";\n    let progressHTML = `<li class="row">\n                          <i class="fas fa-file-alt"><\/i>\n                          <div class="content">\n                            <div class="details">\n                              <span class="name">${name} \u2022 Uploading<\/span>\n                              <span class="percent">${fileLoaded}%<\/span>\n                            <\/div>\n                            <div class="progress-bar">\n                              <div class="progress" style="width: ${fileLoaded}%"><\/div>\n                            <\/div>\n                          <\/div>\n                        <\/li>`;\n    \/\/ uploadedArea.innerHTML = ""; \/\/uncomment this line if you don't want to show upload history\n    uploadedArea.classList.add("onprogress");\n    progressArea.innerHTML = progressHTML;\n    if(loaded == total){\n      progressArea.innerHTML = "";\n      let uploadedHTML = `<li class="row">\n                            <div class="content upload">\n                              <i class="fas fa-file-alt"><\/i>\n                              <div class="details">\n                                <span class="name">${name} \u2022 Uploaded<\/span>\n                                <span class="size">${fileSize}<\/span>\n                              <\/div>\n                            <\/div>\n                            <i class="fas fa-check"><\/i>\n                          <\/li>`;\n      uploadedArea.classList.remove("onprogress");\n      \/\/ uploadedArea.innerHTML = uploadedHTML; \/\/uncomment this line if you don't want to show upload history\n      uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML); \/\/remove this line if you don't want to show upload history\n    }\n  });\n  let data = new FormData(form); \/\/FormData is an object to easily send form data\n  xhr.send(data); \/\/sending form data\n}\n<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* Import Google font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: "Poppins", sans-serif;\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #6990F2;\n}\n\n::selection{\n  color: #fff;\n  background: #6990F2;\n}\n.wrapper{\n  width: 430px;\n  background: #fff;\n  border-radius: 5px;\n  padding: 30px;\n  box-shadow: 7px 7px 12px rgba(0,0,0,0.05);\n}\n.wrapper header{\n  color: #6990F2;\n  font-size: 27px;\n  font-weight: 600;\n  text-align: center;\n}\n.wrapper form{\n  height: 167px;\n  display: flex;\n  cursor: pointer;\n  margin: 30px 0;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  border-radius: 5px;\n  border: 2px dashed #6990F2;\n}\nform :where(i, p){\n  color: #6990F2;\n}\nform i{\n  font-size: 50px;\n}\nform p{\n  margin-top: 15px;\n  font-size: 16px;\n}\n\nsection .row{\n  margin-bottom: 10px;\n  background: #E9F0FF;\n  list-style: none;\n  padding: 15px 20px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\nsection .row i{\n  color: #6990F2;\n  font-size: 30px;\n}\nsection .details span{\n  font-size: 14px;\n}\n.progress-area .row .content{\n  width: 100%;\n  margin-left: 15px;\n}\n.progress-area .details{\n  display: flex;\n  align-items: center;\n  margin-bottom: 7px;\n  justify-content: space-between;\n}\n.progress-area .content .progress-bar{\n  height: 6px;\n  width: 100%;\n  margin-bottom: 4px;\n  background: #fff;\n  border-radius: 30px;\n}\n.content .progress-bar .progress{\n  height: 100%;\n  width: 0%;\n  background: #6990F2;\n  border-radius: inherit;\n}\n.uploaded-area{\n  max-height: 232px;\n  overflow-y: scroll;\n}\n.uploaded-area.onprogress{\n  max-height: 150px;\n}\n.uploaded-area::-webkit-scrollbar{\n  width: 0px;\n}\n.uploaded-area .row .content{\n  display: flex;\n  align-items: center;\n}\n.uploaded-area .row .details{\n  display: flex;\n  margin-left: 15px;\n  flex-direction: column;\n}\n.uploaded-area .row .details .size{\n  color: #404040;\n  font-size: 11px;\n}\n.uploaded-area i.fa-check{\n  font-size: 16px;\n}\n<\/pre><\/div>\n\n\n\n
php\/upload.php<\/h3>\n\n\n\n
<?php\n  $file_name =  $_FILES['file']['name']; \/\/getting file name\n  $tmp_name = $_FILES['file']['tmp_name']; \/\/getting temp_name of file\n  $file_up_name = time().$file_name; \/\/making file name dynamic by adding time before file name\n  move_uploaded_file($tmp_name, "files\/".$file_up_name); \/\/moving file to the specified folder with dynamic name\n?>\n<\/pre><\/div>\n\n\n\n
Create a Folder for Uploaded Files<\/h3>\n\n\n\n
Now you need to create a folder called files<\/code> inside the php<\/code> folder. Basically, this folder will hold all the uploaded files.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you\u00a0how to upload files with a progress bar\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File Upload with Progress Bar project is given below. index.html script.js style.css php\/upload.php Create a Folder for Uploaded Files Now you need to create a folder called files inside the … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3659,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nFile Upload with Progress Bar HTML5, CSS3, JavaScript & PHP<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you\u00a0how to upload files with a progress bar\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you\u00a0how to upload files with a progress bar\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T19:38:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T19:39:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/File-Upload-with-Progress-Bar-HTML-CSS-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP","description":"In this tutorial, I will teach you\u00a0how to upload files with a progress bar\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/","og_locale":"en_US","og_type":"article","og_title":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP","og_description":"In this tutorial, I will teach you\u00a0how to upload files with a progress bar\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File","og_url":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T19:38:12+00:00","article_modified_time":"2022-10-07T19:39:15+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/File-Upload-with-Progress-Bar-HTML-CSS-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP","datePublished":"2022-10-07T19:38:12+00:00","dateModified":"2022-10-07T19:39:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/"},"wordCount":80,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/File-Upload-with-Progress-Bar-HTML-CSS-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/","url":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/","name":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/File-Upload-with-Progress-Bar-HTML-CSS-JavaScript.jpg","datePublished":"2022-10-07T19:38:12+00:00","dateModified":"2022-10-07T19:39:15+00:00","description":"In this tutorial, I will teach you\u00a0how to upload files with a progress bar\u00a0using HTML5, CSS3, JavaScript, and PHP. The complete source code of this File","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/File-Upload-with-Progress-Bar-HTML-CSS-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/File-Upload-with-Progress-Bar-HTML-CSS-JavaScript.jpg","width":880,"height":495,"caption":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/file-upload-with-progress-bar-html5-css3-javascript-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"File Upload with Progress Bar HTML5, CSS3, JavaScript & PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3657"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3657\/revisions"}],"predecessor-version":[{"id":3660,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3657\/revisions\/3660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3659"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}