Did you know it is really easy to store and retrieve images using Multer? “Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.”
I built an application to show you how to upload images using multi with Node.js on the frontend.
To use Node on your local machine, head out to nodejs.org and install it according to your OS.
What is Node Package Manager (NPM)? NPM is automatically installed into your local machine with Node.js. NPM is the world's largest registry software. It is used widely by open-source developers to share software. It acts as a package manager for Node JS. It manages dependencies and dependencies are defined in the package.json file.
After installing, check the versions using the following commands:
Now, let's get started with our first node app:
Create a folder in your machine and open it using VS Code.
After you enter VS Code ~
Step 1: run npm init
This command creates a new package.json file in your folder.
This is how my folder structure looks like currently-
Step 2: Run npm install express in your terminal.
This installs the node_modules folder and creates a package-lock.json file.
Module in Node. js is a simple or complex functionality organized in single or multiple JavaScript files which can be reused throughout the Node. js application. Each module in Node. js has its context, so it cannot interfere with other modules.
Step 3: Install Dependencies
Run the command npm install express multer — save
Step 4: Create app.js
Open app.js and paste the following code there.
Step 5: Run your server-side code using node app.js
Open your browser and type localhost http://localhost:4000/
And you will see Hello peeps! on the screen…voila!
Step 6: Add multer to your application
var multer = require(‘multer');
Let's create a destination for multer to store the images and a custom name setter to name them.
Step 7: Add the following piece of code under the line in step 6
Multer ships with storage engines DiskStorage and MemoryStorage . We shall use Disk Storage as shown.
The disk storage engine gives you full control over storing files on a disk.
Note: If no destination is given, the operating system's default directory for temporary files is used.
You are responsible for creating the directory when providing destination it as a function. When passing a string, multer will make sure that the directory is created for you.
Filename is used to determine what the file should be named inside the folder. If no filename is given, each file will be given a random name that doesn't include any file extension.
Note: Multer will not append any file extension for you, your function should return a filename complete with a file extension.
Step 8: Create a new folder named public and inside that create another folder that uploads to hold your images.
Here, I will be using a function to control the files getting uploaded as I want only images for this application.
Step 9: Go ahead and paste the following code into your app.js
fileFilter is the function which is controlling the file upload.
Only .jpg,.jpeg, and .png are allowed.
Now set the storage property to storage and fileFilter property equal to the fileFilter function.
Multer supports uploading single as well as multiple uploads.upload.singleis used for uploading a single file.
As stated in the documentation ~
Multer adds a body object and a file or files object to the request object. The body object contains the values of the text fields of the form, the file or files object contains the files uploaded via the form.
Here, I will be dealing with only a single file!
Step 10: Let's create the endpoint then.
Let's check this with POSTMAN
So, here it is, working perfectly…We get the filename as it is in the uploads folder and also, we get the data of the file that we have uploaded.
Give this a try!
Best way to work with file upload in Node.js….
Also, I am going to connect this with a React client-side application. I will be posting the story soon!
References: multer
Here is my GitHub profile! Sristi27
Git Repository for this application: GitHub - Sristi27/react-img
Don't forget to give it a star if you like it! Hope you liked it.