Backend Development
PHP Tutorial
How to Upload Files With Vanilla JavaScript and Add a Loading Animation
How to Upload Files With Vanilla JavaScript and Add a Loading Animation
File upload is very ubiquitous to any web application and when it comes to uploading files and resources over the internet (on a browser), things can be somewhat stressful. Fortunately, with HTML 5, input elements which usually come with form control to allow users to modify data can become so handy in simplifying uploading resources.
In this article, we would have a closer look at how to handle file uploads using vanilla JavaScript. The aim is to teach you how to build a file upload component without the need for an external library and also learn some core concepts in JavaScript. You will also learn how to show the progress status of an upload as it happens.
Source Code: As usual, you can tinker with the source code hosted on GitHub repo for the project.
Project Setup
First and foremost, in your preferred directory, create a new folder for the project:
$ mkdir file-upload-progress-bar-javascript
After doing so, let us now create index.html, main.css, and app.js files where we will write all the markup for our project.
$ touch index.html && touch main.css && touch app.js
Now we can begin to build the structure for the file upload by creating a basic HTML template with
and tags:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
Next, we add base styles for the project in main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
To enhance the look of our applications, we will make use of the icons from the font awesome library which we can add to our project through a kit code that can be created at the official font awesome library website.
Now, index.html is updated, and the main.css file is linked:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css">
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
We continue by building the structure for the file uploader:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body>
<div class="file-upload__wrapper">
<header>File Uploader JavaScript with Progress</header>
<div class="form-parent">
<form action="#" class="file-upload__form">
<input class="file-input" type="file" name="file" hidden />
<i class="fas fa-cloud-upload-alt"></i>
<p>Browse File to Upload</p>
</form>
<div>
<section class="progress-container"></section>
<section class="uploaded-container"></section>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Then, copy/paste the following codes to update main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #cb67e9;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
}
::selection {
color: white;
background: #cb67e9;
}
.file-upload__wrapper {
width: 640px;
background: #fff;
border-radius: 5px;
padding: 35px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
color: #cb67e9;
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
.form-parent {
display: flex;
align-items: center;
gap: 30px;
justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
height: 150px;
border: 2px dashed #cb67e9;
cursor: pointer;
margin: 30px 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 6px;
padding: 10px;
}
form.file-upload__form :where(i, p) {
color: #cb67e9;
}
form.file-upload__form i {
font-size: 50px;
}
form.file-upload__form p {
font-size: 1rem;
margin-top: 15px;
}
section .row {
background: #e9f0ff;
margin-bottom: 10px;
list-style: none;
padding: 15px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6px;
}
section .row i {
font-size: 2rem;
color: #cb67e9;
}
section .details span {
font-size: 1rem;
}
.progress-container .row .content-wrapper {
margin-left: 15px;
width: 100%;
}
.progress-container .details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
height: 10px;
width: 100%;
margin-bottom: 5px;
background: #fff;
border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
height: 100%;
background: #cb67e9;
width: 0%;
border-radius: 6px;
}
.uploaded-container {
overflow-y: scroll;
max-height: 230px;
}
.uploaded-container.onprogress {
max-height: 160px;
}
.uploaded-container .row .content-wrapper {
display: flex;
align-items: center;
}
.uploaded-container .row .details-wrapper {
display: flex;
flex-direction: column;
margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
color: green;
font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
color: #404040;
font-size: 11px;
}
Now, the component should be looking better on the browser:
Adding Upload Functionality
To add the required functionality for uploading in our project, we now make use of the app.js file, where we write JavaScript codes that give life to our project.
Copy/paste the following into app.js:
const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
myInput.click();
});
myInput.onchange = ({ target }) => {
let file = target.files[0];
if (file) {
let fileName = file.name;
if (fileName.length >= 12) {
let splitName = fileName.split(".");
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
}
uploadFile(fileName);
}
};
function uploadFile(name) {
let xhrRequest = new XMLHttpRequest();
const endpoint = "uploadFile.php";
xhrRequest.open("POST", endpoint);
xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
let fileSize;
fileTotal < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
let progressMarkup = `<li class="row">
<i class="fas fa-file-alt"></i>
<div class="content-wrapper">
<div class="details-wrapper">
<span class="name">${name} | <span>Uploading</span></span>
<span class="percent">${fileLoaded}%</span>
</div>
<div class="progress-bar-wrapper">
<div class="progress-wrapper" style="width: ${fileLoaded}%"></div>
</div>
</div>
</li>`;
uploadedContainer.classList.add("onprogress");
progressContainer.innerHTML = progressMarkup;
if (loaded == total) {
progressContainer.innerHTML = "";
let uploadedMarkup = `<li class="row">
<div class="content-wrapper upload">
<i class="fas fa-file-alt"></i>
<div class="details-wrapper">
<span class="name">${name} | <span>Uploaded</span></span>
<span class="file-size">${fileSize}</span>
</div>
</div>
</li>`;
uploadedContainer.classList.remove("onprogress");
uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup);
}
});
let data = new FormData(uploadForm);
xhrRequest.send(data);
}
What we have done is to be able to read a file that has been selected from using the file input element, and create a new list of files on the DOM. When the file is being uploaded, the progress level is shown, and when the file is completed uploaded, the progress status changes to uploaded.
Then, we also add an uploadFile.php to our project to mock an endpoint for sending files. The reason for this is to simulate asynchronosity in our project so that we get the progress loading effect.
<?php $file_name = $_FILES['file']['name']; $tmp_name = $_FILES['file']['tmp_name']; $file_up_name = time().$file_name; move_uploaded_file($tmp_name, "files/".$file_up_name); ?>
Conclusion
You have been awesome to get through to this point of this article.
In this tutorial, you have learned how to build a file upload component and add a progress bar to it. This can be useful when you build websites and want your users to feel included and get a sense of how slow or fast uploading a file is going. Feel free to re-use this project whenever you wish to.
If you get stuck while following along with this tutorial, I suggest you upload your project on GitHub for help from other developers or you can also send a dm to me too, I'll be happy to help.
Here is a link to the GitHub repo for the project.
Relevant Resources
- FontAwesome Docs
The above is the detailed content of How to Upload Files With Vanilla JavaScript and Add a Loading Animation. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1655
14
1414
52
1307
25
1255
29
1228
24
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
How does session hijacking work and how can you mitigate it in PHP?
Apr 06, 2025 am 12:02 AM
Session hijacking can be achieved through the following steps: 1. Obtain the session ID, 2. Use the session ID, 3. Keep the session active. The methods to prevent session hijacking in PHP include: 1. Use the session_regenerate_id() function to regenerate the session ID, 2. Store session data through the database, 3. Ensure that all session data is transmitted through HTTPS.
How do you handle exceptions effectively in PHP (try, catch, finally, throw)?
Apr 05, 2025 am 12:03 AM
In PHP, exception handling is achieved through the try, catch, finally, and throw keywords. 1) The try block surrounds the code that may throw exceptions; 2) The catch block handles exceptions; 3) Finally block ensures that the code is always executed; 4) throw is used to manually throw exceptions. These mechanisms help improve the robustness and maintainability of your code.
Explain different error types in PHP (Notice, Warning, Fatal Error, Parse Error).
Apr 08, 2025 am 12:03 AM
There are four main error types in PHP: 1.Notice: the slightest, will not interrupt the program, such as accessing undefined variables; 2. Warning: serious than Notice, will not terminate the program, such as containing no files; 3. FatalError: the most serious, will terminate the program, such as calling no function; 4. ParseError: syntax error, will prevent the program from being executed, such as forgetting to add the end tag.
What is the difference between include, require, include_once, require_once?
Apr 05, 2025 am 12:07 AM
In PHP, the difference between include, require, include_once, require_once is: 1) include generates a warning and continues to execute, 2) require generates a fatal error and stops execution, 3) include_once and require_once prevent repeated inclusions. The choice of these functions depends on the importance of the file and whether it is necessary to prevent duplicate inclusion. Rational use can improve the readability and maintainability of the code.
PHP and Python: Comparing Two Popular Programming Languages
Apr 14, 2025 am 12:13 AM
PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.
PHP: A Key Language for Web Development
Apr 13, 2025 am 12:08 AM
PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7
What are HTTP request methods (GET, POST, PUT, DELETE, etc.) and when should each be used?
Apr 09, 2025 am 12:09 AM
HTTP request methods include GET, POST, PUT and DELETE, which are used to obtain, submit, update and delete resources respectively. 1. The GET method is used to obtain resources and is suitable for read operations. 2. The POST method is used to submit data and is often used to create new resources. 3. The PUT method is used to update resources and is suitable for complete updates. 4. The DELETE method is used to delete resources and is suitable for deletion operations.
