Whenever you make a website like social media app or blog app , you will most probably have feature where you will allow user to upload images. That’s what we will build here — minimal file upload server.
This article is also published on gyaanibuddy.
What are we building?
We are going to build a simple application using node.js which is capable of uploading sinlge/multiple images to server.
There are various ways by which we can upload image to server using node.js. One of the easiest and common ways to do it is by using multer library.
Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.
Final project Structure
For reference here is the final project structure you will have after completing this article.
- First open cmd and run the following command to check if you have node installed. If you don’t have it installed follow this article to install node.js.
2. Create a project directory and cd into it
Lets begin with the code:
- Run npm init to start create package.json.
npm init -y
2. Install express
npm install express
3. Install multer
npm install multer
4. Create a folder named public in root directory. Here we will later place our html files.Also create a uploads folders.
5. Now lets create a html page which contains 2 simple forms.
- To upload single image
- To upload multiple images
6. Final html file (public/index.html) will look like.
7. Create index.js in current root project directory.
8. Import express,multer and initialize port variable to 3000.
9. We need to tell multer where we want to upload images and by what name should the file be saved. For that we create a object as
This will set image upload destination to “uploads” folder and filename will be same as uploaded file’s original name.
10. To understand upcoming code lets consider a general example and understand it.
We want to upload image, then store it to a “uploads” directory and make image accessible on web page.
So now when we upload image (lets say sample.png) it will be stored uploads folder and will be accessible on web page on the url http://localhost:3000/uploads/sample.png
11. Route to upload single image
12. Route to upload multiple images
Lets look at the entire code at once now
Time to see the results
Open the terminal and cd to current project directory and enter
Before clicking upload:
Output (Single image upload):
You will get the following success message and image will be uploaded to “uploads” folder in project root directory
Output (Multiple image upload):
Uploaded two random images for testing.
To check if our server actually worked checkout uploads folder in root directory.
As you can see that the images we have uploaded are saved in “uploads” folder.
That’s all ! Now we have a website which is capable of uploading single/multiple images to server.
To know about more options like restricting file size, accepting files with specific extensions only etc checkout multer.
So we have successfully built a website containing forms to upload single / multiple images using multer library.
For code you can visit https://github.com/RugvedB/Nodejs-Multer-File