How to build a JavaScript File Uploader?

File uploading is a basic feature of most of today’s web projects. For example, modern websites and web apps like Facebook, LinkedIn, Twitter, Coursera, and many more enable end-users to upload files, such as images, documents, videos, etc. Additionally, online tools like image editing tools, plagiarism checkers, and PDF-to-Word converters also allow users to upload files. Sometimes, internal teams need a file upload feature to upload product videos and images. While creating a file uploader can be challenging, today, several third-party tools and libraries are available that help implement a file upload feature quickly into your project. However, if you’re looking to create a file uploader, more specifically, a JavaScript uploader, from scratch, this article is the right place.

In this article, we’ll show you how to create a JavaScript file uploader with vanilla JavaScript or pure JavaScript without using any external libraries.

What Are The Features Of A File Uploader?

When it comes to building a file uploader, we need to create a front-end file upload button that will enable users to upload their desired files to the website or web app. We can also allow multiple file uploads and display progress bars for a better user experience. Additionally, we should also show image previews when a user uploads an image file. Once the file is uploaded, we need to read it, send it to the backend, and store it on the server. Sometimes, users upload large files, resulting in slow uploaders. For this reason, it’s best to upload large files to the server in chunks to prevent errors and improve speed. These chunks of files are more manageable than one single large file.

Additionally, developers must create an efficient file uploader that supports fast uploads. You also need to ensure a file uploader is secure to prevent cyber attackers from deploying malware and viruses into your server.

How To Create A JavaScript File Uploader?

Step 1: Setting Up The Server Side

We’ll use the built-in HTTP package to set up the Node.js server. We’ll start by creating a new folder for the project:

mkdir fileupload-service

Next, we’ll create an index.js file. This will be the entry point of our server.

Finally, we’ll create the HTTP server that’ll run on port 8080

Step 2: Creating The Front-End Of The JavaScript File Uploader

For creating the front end of our JavaScript file uploader, we’ll create a basic HTML file that will display a file upload button and accept file input from users. We’ll also display the status of the file upload. Once the user clicks the button, the file upload process will be initiated.

While we’re creating a simple file upload button, you can also edit the text of the button or change the color of the button for design purposes.

Next, we’ll send this file from the backend:

Step 3: Reading The Uploaded File On The Front End

To read the file content on the front end, we’ll use the ‘FileReader’ object. It enables web apps to read the file content (stored on the system of the user) asynchronously. The ‘FileReader’ object offers several methods to read a file. For example, we can read the uploaded file as an array buffer or in raw binary data. We can even read the file as a data URL. Here, we’ll use the array method to read the file:

The selected files can be accessed under the ‘files’ field for the input:

The ‘FileReader’ object also provides several event listeners, such as ‘onprogress’ and ‘onload,’ to track the reading of the uploaded file on the front end. Here, we’ll use the ‘onload’ event:

Step 4: Sending The Uploaded File To The Backend

Before we send the file uploaded by the user to the backend, it’s best to divide it into small chunks or pieces and send the file chunks periodically, especially if the file size is big. This is because uploading files that are very large can cause issues related to latency and speed. Additionally, sometimes cyber attackers also upload files that are too large, which can cause the server to malfunction.

So, we’ll first split the file into chunks and send them to the backend one by one. We also need to ensure we send the chunks in order so that the file doesn’t get corrupted. We’ll also use ‘async await’ so that we don’t overload the server with requests.

Step 5: Storing The File Chunks On The Server

Lastly, we’ll receive the chunks and store them on the server.

That’s it. We now have a complete single file uploader for Javascript file uploads. We can also enable multiple file uploads by using the ‘multiple’ option:

<input type=”file” id=”files” multiple>

We’ll break each file into chunks one by one and send them to the backend.

Conclusion

File upload is an essential feature of many modern web apps and websites. We can use a third-party file upload tool, such as a JavaScript library or file upload API, to quickly implement a JavaScript file upload into our apps. However, you can also create a file uploader from scratch that way you want. For example, you can split large files into chunks and send them to the backend one by one. In this article, we’ve created a JavaScript file uploader with Vanilla JS from scratch.