Member-only story
A Complete Guide to File Uploading in JavaScript
Single file, multiple files, drag, and paste, everything you need to know
File upload is a common function for a web project. I believe that everyone has encountered related requirements more or less during the development.
In this article, I have summarized some scenarios and solutions, hoping to help you thoroughly grasp questions related to file uploading.
Our Goals
First, let’s clarify the specific functions of file uploading.
According to upload target, there are 3 kind tasks:
- Upload a single file
- Upload multiple files at the same time
- Upload the entire folder
According to the user actions, there are:
- Choose a file the upload
- Drag the file to the box then upload
- Upload from clipboard
From a performance perspective, we may need:
- Upload after compressing a file
- Divide a large file into blocks then uploading
And additionally, sometimes we may not upload files in the client browser, but through the server to upload to another server.
We will discuss these in turn.
Prerequisites
Before the start coding, we still need to understand some background knowledge.
First, when uploading files, we use Axios, the most popular HTTP Library. In actual development, we generally don’t use XMLHttpRequest directly, and using Axios conforms to the real development model.
When we discuss uploading files in the front-end, if we want to fully understand the relevant principles, we must understand the relevant back-end code. Here we use the Koa to implement our server.
Finally, I hope you will have a brief understanding of formdata, we use this data format to upload files.
Upload a single file
The need to upload a file is too common. For example, when you register for Medium, you need to upload an avatar.
