Antd File Upload with Nodejs & Multer
Recently, I started working on some projects. To build this project, I’m using React for the front-end and NodeJs for the back-end. To create UI components I’m using Antd. Every component was working out of the box and then I encounter some problem with a component. In this post, I will share how I was able to tackle the file upload problem.
In this post, I’m assuming you’re familiar with Nodejs and Reactjs. I won’t be telling the basics of it. So If you’re new I highly recommend you to please go through the basics and come back again here.
Problem Statement/Requirements
Let’s talk about the requirements first. Project requires uploading multiple files (let’s say 15 files in numbers) frequently. Expectation is to make a single request to the back-end to transfer all the files at the same time. But antd upload component doesn’t work like this. It starts uploading an image as soon as you select a file. Now, this could be a problem for any company if let’s assume a company is handling a user base of 1Million and if less than half of the people are uploading wrong files somehow it will add additional cost to the company.
Lets’ build the server first
As I mentioned before, for the backend we’re using Nodejs. In the backend to upload files, we’re using a module known as Multer. It is an easy-to-use module and highly configurable. This is how our backend code looks like:
I will quickly give you an overview of code what exactly it does.
In the first few lines, we’re importing modules. After that, we’re initializing app. Then we are defining some configs example storage, file type checks and so on. You can find all these configs on multer official doc.
After configs, we are defining some routes. We’ve created two routes. One is a GET call that will return Hello, World, and another one is POST call that will simply return success. Saving a file in the uploads directory will be taken care of by multer module itself, we don’t have to do anything.
This is all about our server.
Let’s Move on to the client-side — React App
If you’re not familiar with antd. I suggest you play with antd for some time. I’m sure you’ll like it because it will boost up your development speed.
This is how our front-end react code looks like and let’s try to understand this code in parts.
Upload File Function
let’s talk about the uploadFile function. This function is responsible for sending a post request to the server with the file object. If the server returns success it will show a message else it will print an error in the console. An important part to note here is how we are creating our data payload with the help of FormData interface and its content type is multipart/form-data
what if there are more files?
Then we simply need to add those files in the formdata variable before making a request.
Let’s discuss App Component
As you might know, JSX is a syntax extension to JavaScript. JSX produces React “elements”. Inside the App function, we’re are creating a form having an upload input and a submit button. Here we can add multiple form items to upload more documents. For simplification, I have removed all other attributes from the upload element like props, beforeChange, onChange , etc.
When a user submits the form. It will call the upload file function and will return the response.
let’s see our live demo here!
So this is how to handle uploads on Antd React with a Node as a backend. You can also use React to do the same with API to remote server and data storage solutions.
