Upload Image: [MERN stack] via Multer
Uploading images often becomes a challenge for us if and only if we are not aware of the right processes and protocols. Since past six and a half months I have been trying my hands with MongoDb, Express, React and Node.js, I will try to make it as simple as I can to upload images using a server side technology.
About the Tech-Stack
Before starting with uploading thing let us talk about the building blocks we would be playing around with.
A walk through the language, library and frameworks being utilized in this case.
React: A JavaScript library for designing User Interfaces. It is developed and maintained by Facebook and is a highly popular Single Page Application framework in use today.
Node: An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. It was first developed by Joyent and has over time evolved into a sustainable and scalable server side development choice for JavaScript-preferred development teams.
Express: It is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It enables easy API development.
MongoDB: MongoDB is a cross-platform document-oriented database program. It has become a popular means to work with data due to the intuitive nature in which it handles data.
Coding : upload image using Multer
One of the preferred techniques to upload images is using multer as an option. Multer is basically a Node.js middleware which helps us to handle data in multipart/form-data format and is primarily used for uploading files to the server. In our case, we would be using multer to upload a file from the React side onto a static directory created on the node side and then send a reference of the image uploaded as a document key to be stored in a MongoDB database instance. Sounds pretty simple.
Enough talk. Time to code. So I am assuming we already have React and Node.js with Express setup up with all the required middleware, in order to be able to connect to the database in use. If not, you can check out my repository to get an idea regarding that.
We would start up by setting up multer in our Node.js application and creating an API that enables multer to come into play. After having setup a connection to MongoDB, we go ahead and install multer to the node application.
We will have a model already created using mongoose to store the images being uploaded. It is a simple model which includes an image name and the image reference or image data. This model would be utilized for all the three techniques. The model structure is as follows.
A common route is created for all the APIs concerned with handling the image upload process. For this technique, we have created an API with route /add which utilizes the multer middleware and stores the images received from the front-end into a static uploads folder on the server side.
First, we create this uploads folder and create a static path reference to it through the following code added in server.js.
Having created a reference to the uploads folder and installed multer middleware, we go ahead and create our respective API to handle image uploading using multer. We import the related middlewares and libraries to be utilized in creating the concerned API. We create a storage variable where we provide the path to the destination folder being used and also define a filename for the file uploaded. The fileFilter variable defines the file types which are to be accepted by the server. Finally, we create an upload variable which creates an instance of the multer middleware with the storage details, maximum acceptable file size and filter options being set.
We create the route /add where we process the incoming multipart data which basically consists of the image file being sent from the front-end. The upload.single() function should be provided with the key-name consisting of the image file in order for it to invoke multer properly. Then the data is sent to the MongoDB database.
Now we will create our controller addStudent which will take in image from frontend as a parameter from req.body. Below is the code for controller.
The server side code is pretty straight forward. The front-end code for the same is no different. I have added minimal styling to make it look presentable. Let’s skip the basic styling and layout part as I believe there is not much for us to discuss through. Jumping to the functional aspect of how the uploaded file is handled, let’s take a look at the code concerned.
In the front-end, we simply upload the image through an input tag created in the layout. The image is then stored in a local state variable and converted into form data format after which it is sent to the node server, using axios as a http client. And here we end up with our coding part.
Browser View :
Conclusion
We have covered an important techniques for uploading images using a simple combination of React and Node, along with the relevant middleware. Image uploading is an essential aspect of building almost any application and it is widely used and pretty much required in almost every scenario.
I hope this would help you get started or give you an idea as to where to start. Feel free to give feedback.
Here is my Github Repo for reference : https://github.com/syedshamsher/multer-upload
