DEV Community: Uchechukwu Azubuko

How to Upload Files With Vanilla JavaScript and Add a Loading Animation

Uchechukwu Azubuko — Fri, 02 Aug 2024 16:33:14 +0000

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 <head> and <body> 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

African software engineers are the future

Uchechukwu Azubuko — Thu, 08 Sep 2022 21:41:34 +0000

The tech revolution may have started at Bell Labs, but its future shall be written in Lagos, Johannesburg, Nairobi, and the capitals of Africa.

In this article (the link below), I write of the youngest and fastest-growing developer population in the world, and why it can become a source for top tech talents.

I hope you find it interesting! ⬇️

https://bit.ly/3D6EqEh

How to Use TypeScript with Vue.js: Your Go-to Guide

Uchechukwu Azubuko — Mon, 20 Jun 2022 10:28:34 +0000

TypeScript has now become a crucial indicator sought out for in a hire, library, maintainer, or digital product.

In this article (follow the link below to read the article), I have written a beginner's guide for how to use TypeScript in a Vue.js application.

➡️ Have a great read!

How to Use TypeScript with Vue.js: Your Go-to Guide

A List of Frontend Communities, Newsletters, and Podcasts to Join Today!

Uchechukwu Azubuko — Fri, 10 Dec 2021 13:48:52 +0000

If you are a frontend developer, then you're at the right place. In this article, you will discover a list of the best communities, newsletters, and podcasts you can signup for; to help you in your frontend development journey.

Are there any communities, newsletters, and podcasts that I missed out on the list? Feel free to add them to the comment section.

Happy coding, friends! 👋

How to Build an API using Strapi

Uchechukwu Azubuko — Tue, 07 Dec 2021 18:06:34 +0000

Ever needed to build and ship an API in very little time? Read this article to learn how to use Strapi to get the job done.

APIs are so useful and ubiquitous in any application, and as a developer, you may be fazed by building an API in very little time. In this article, I will show you how to build a Node.js API so fast (perhaps, in 10 minutes) using the help of Strapi’s intuitive interface.

What You’ll Learn

How to build an API quickly with Strapi.
How to build a Node backend without writing Node code.
How to manage relational fields with Strapi.
How to add GraphQL endpoints to fetch and mutate your API.

This Article Is Written For

Developers that need to build backend APIs quickly.
Developers that want to build a backend, but only want to focus on the frontend.
Developers that want to build a Node backend API, but don’t have the Node expertise.

What You Will Build

In this article, you will start from scratch (i.e., from an empty directory), then you will go through all the steps needed to build an API using Strapi. The API that you will build will allow clients to make requests to manipulate content. The content, in this case, will represent blog posts (as in, for a blogging website - if you’d like to build out the frontend, moving forward.)

Prerequisites

What you’ll need for this tutorial:

Knowledge of API; it might make sense to learn about it first.
Node & NPM - You’ll need to have Node and NPM installed on your local machine. To confirm they’re installed, run the following commands in your terminal:

node -v && npm --v

The Node Package Manager comes installed with Node. If you don’t have them installed, you can follow the instructions on the official Node.js website.

This tutorial was completed using Node v14.18.1.

Yarn - Yarn is a package manager that would help us manage our application dependencies in a way that is several times faster and more reliable than NPM. You can install yarn using:

npm install --global yarn

Here’s what we’ll cover today:

👋 Intro to Strapi
⚙️ Setting up the Strapi project
🏗️ Building the Strapi backend
🤝 Understanding and using relations in Strapi
⚡ Delivering faster with GraphQL and Strapi
🤔 Conclusion

Intro to Strapi

Strapi is an open-source headless CMS (Content Management System) based on Node.js that gives developers the ability to easily build self-hosted, customizable, and performant content APIs (RESTful and GraphQL). With Strapi, weeks of API development can be saved, because it’s no-code, and building a robust API could be done in less than 20 minutes.

Isn’t that awesome? I thought so too. Let’s dive right into how that can be made possible.

Setting up the Strapi project

There are various ways to install a new Strapi project. However, the Strapi CLI is the best way to get started.

For starters, open a terminal and navigate to the directory where you’d like to create this project. Run the following command in your terminal to scaffold a new Strapi project:

yarn create strapi-app my-project --quickstart

Using the --quickstart flag at the end of the command provides you with the SQLite database by default, and directly creates the project in quickstart mode. If you’d like to switch databases, read more.

When project creation is completed, the app should automatically start at localhost:1337 on your browser.

If your app didn’t automatically start, run the following command in the project folder:

yarn develop

Open up the app folder with your IDE, and the project structure should look like mine below:

Building the Strapi backend

With the project folder now created, the first step to building a Strapi backend is to register an admin.

You can register an admin by filling the form that was provided on startup, as I have done below:

Then, click on the “LET’S START” button. This will create your account and take you to the Strapi admin UI, which you will use for development configurations.

Isn’t it amazing how you moved from yarn create to having a dashboard where you can create your very own API pretty soon?

At this point, you are ready to use the awesome powers of Strapi in building an API for blog posts. Let’s proceed.

Designing the data structure

At this point, we are going to start creating the data structure for our API. We can do this by creating content-types. The first content type we will build is for posts.

Go to the Content-Types Builder section and click on Create new collection type. A modal will appear, where you will enter post as the display name.

The Content-Types Builder allows to create and update content-types: single and collection types. Read more.

Then, a modal will appear which you will use to create the fields for the post content-type.

Hmm, what fields does a blog post always have… Let’s create the following ones:

title with type Text (required)
content with type Rich Text (required)
image with type Media (Single image) and (required)
author with type Text (required)

Now, you have a post content-type with 4 fields - Text, Rich Text, Media, and Text.

Hit Finish, then Save! Here you go, your first content-type has been created, and you have successfully created the schema for a blog post.

Schemas help to implement the database’s design. Database schemas are the blueprints that help developers visualize how databases should be built. They provide a reference point that indicates what fields of information the project contains.

Now, on the sidebar, we will see the “COLLECTION TYPES” section and if you go to the post section, you’ll find there are currently no posts.

You can create a brand new post by clicking Add new posts.

You’ll see that you are provided with a CMS for inputting data. Go ahead and fill up the fields (title, featured image, author, content) with information about the first post you’d like to add to your database. You can add lots of posts if you’d like.

Then hit Save, and Publish. A screenshot of mine is shown below:

To view the posts API, visit localhost:1337/posts. P.s.: Notice it pluralized the name of the collection type that we had set initially - post.

You will get a status 403 - forbidden error, as shown below:

That’s because we attempted to view the API as an unauthenticated user, and by default, viewing an API requires authentication. To make posts public, we have to grant read-access to the post content-type. To do this, head to the dashboard and under the “GENERAL” section.

Click on the Settings then Roles & Permission and click on the public role.
Check the article find and findone options under permission and save.

With these, you have permitted a public user to get all posts **GET** /posts, and also get a single post **GET** /posts/:id; something so similar to the REST API GET method.

Then hit Save!

Now, if we head over to localhost:1337/posts you should now see all your posts from the post endpoint this time.

You can access created endpoints with REST API methods, because by default, Strapi provides our endpoints via REST, but later in this article, I will show you how endpoints can be accessed via GraphQL

In the project folder, the ./api/**/config/routes.json files define all available endpoints for the clients. By default, Strapi generates endpoints for all your Content Types. Read more.

Looks like we’re making progress. Doesn’t it?

Now we have created a post, the content is stored in your database so that you can have access to your data when you need to.

If you look through the posts endpoint, you’d notice that one other benefit of Strapi is that it supports image optimization too. You are given the ability to render different image formats including thumbnail, large, medium, and small.

With Strapi, you also don’t have to go through the stress of building out an MVC project structure - creating a database, database connections, models, etc. Here, it’s all done under the hood for you. We’ll have a look at that pretty soon.

Isn’t it beautiful to see that we are making headway?

Back in your IDE, you will now see that a ./api/posts/ folder has been created in the project folder, which is a reflection of the posts endpoint you created on the admin panel.

In the models folder, the posts.settings.json file defines the post schema that you created, as shown below:

As your app grows -- the more content-types(endpoints) you add up, the more folders are created in the api directory.

Also, note that image uploads are stored in the public/uploads folder.

I feel it makes huge sense that all of your code corresponds to all actions made on the dashboard. What do you think?

Understanding and using relations in Strapi

Let’s say you have a collection of videos, and for each blog post; a video should be embedded within. To establish a connection between a video from the videos collection and its associated blog post, you first have to learn how to use relations in Strapi.

Relation-type fields added to a content-type from the Content-Types Builder allow to establish a relation with another content-type - mandatorily a collection type. These fields are called "relational fields".

With our new-found knowledge, let’s go ahead and create the video collection - to demonstrate how to set up relations in Strapi.

Go to the Content-Types Builder section and click on Create new collection type. Enter video as the display name.

Then add the following field for the video content-type:

url with type Text (required)

Hit Finish, then Save! Now, your second content-type has been created, and you have successfully created the schema for a video.

To continue, grab a video URL, perhaps the one for your favorite YouTube video.

Because we want to create a link between the post collection and the video collection, we also need to add a new field called video in the Posts collection. The field type for this would be Relation, and we can choose the kind of relationship we want between posts and videos (by selecting any of the 6 options), to keep things simple in this demonstration, we’ll choose the one to one relationship where a post has a video, as shown below:

Note: For a field to be a relation, it has to be a collection type.

Hit the Finish button when you’re done.

Now your post schema should look like this:

With these, the video field in the Posts collection has a relation with the Videos collection.

To continue, navigate to the Videos sections under the “COLLECTION TYPES” in your dashboard, then click the Add New Video button to add a video to your Videos collection as shown below:

Hit Save, then Publish.

With the video added, we can now link it with a blog post, by heading to the post of choice in the Posts collection, clicking the Edit button, and selecting the video URL you’d like to add to that post.

Tadaa! If you visit localhost:1337/posts on your browser, you will see that the posts endpoint has been updated and the video has been added to the post where you included it, as shown below:

Delivering faster with GraphQL and Strapi

Delivering applications faster is always a top priority. In this section, you will learn how to easily query your data through a generated GraphQL schema.

To get started with GraphQL in your app, you first have to install the plugin by running the following command in your project directory:

yarn strapi install graphql

With the GraphQL plugin installed, you will be able to add a GraphQL endpoint to fetch and mutate your content.

Restart the app using:

yarn develop

When you visit localhost:1337/graphql in your browser, you should see the interface (GraphQL Playground) that will help you to write a GraphQL query to explore your data

If you’d like to access the id, title, url of the featured image, author, and url of the video for blog posts, you can write the query as I’ve shown below:

We were able to grab data pretty fast and conveniently! Also, using the sidebar, you can have a peek at your schema. Awesome!

Conclusion

In this article, you learned how fast, easy to use, and powerful Strapi is for building APIs. Setting up our backend was super seamless. Just create your collections and Strapi generates RESTful endpoints by default, or if you’d prefer to use GraphQL endpoints, simply install the plugin. All of these, using best web practices. Awesome stuff, indeed!

If you have any questions or suggestions, feel free to post a comment, email, or DM me.

Resources

Strapi developer documentation

DEV Community: Uchechukwu Azubuko

How to Upload Files With Vanilla JavaScript and Add a Loading Animation

Project Setup

Adding Upload Functionality

Conclusion

Relevant Resources

African software engineers are the future

How to Use TypeScript with Vue.js: Your Go-to Guide

A List of Frontend Communities, Newsletters, and Podcasts to Join Today!

How to Build an API using Strapi

What You’ll Learn

This Article Is Written For

What You Will Build

Prerequisites

Table of Contents

Intro to Strapi

Setting up the Strapi project

Building the Strapi backend

Designing the data structure

Understanding and using relations in Strapi

Delivering faster with GraphQL and Strapi

Conclusion

Resources