Plain JavaScript File Uploader

By Sahil Raj

A backend service that enables file uploading in the form of chunks without relying on databases or any external libraries.

INTRODUCTION

This project contains HTML and Javascript files that will allow users to select a file and upload it to a server in the form of chunks. When you will open the document in the browser, you will see an upload button and a progress bar. The goal of the application is to provide users with an upload backend system with just a few lines of code without any complexity in understanding and handling the code. That's why it is meant for beginner programmers who want to complete their projects fast. This is not meant to be secured for some obvious reasons.

The HTML document that contains the necessary HTML elements for the file uploader interface and JavaScript code that handles the file upload process. In terms of libraries, the code does not use any external libraries. However, it relies on built-in JavaScript objects and methods, such as FileReader, fetch(), and the FormData object.

HOW TO RUN THE CODE

1. Extract the zipped file given below.

2. Open the extracted folder.

3. Open the terminal in the same folder (i.e. Drive:/location/NODB_uploader) where the index.js is located

4. Execute the following command:

node index.js

5. Type this URL on your preferred browser:

http://localhost:8080/

PROGRAM EXECUTION

CODE EXPLANATION

The JavaScript code gets references to the HTML elements using their id attributes. Then, an event listener is used with uploadButton element, for  "click" event. When the user clicks the button, the code executes a function that performs the following steps:

• Creates a FileReader object.
• Receive the file using the fileInput element.
• If the file is not chosen then it throws an error message otherwise below steps are performed.
• Sets up an onload event handler for the FileReader object which is called when the file is loaded.
• Calculates the number of chunks the file will be split into for uploading.
• A random filename is generated for upload.
• Loops through each chunk of the file and uploads it using the fetch() method.
• The progress bar is adjusted based on the percentage of chunks uploaded.
• After upload completion, a completion message is shown otherwise an error is thrown.