Using Multer to Upload Files React Mongoose Heroku

Playing with Multer

Tips to make image upload in Node.js simpler

Source: Unsplash.com

When a web customer uploads a file (like an image or a document) on the server, it is generally through a form and it is encoded as multipart/form-data . So, multer is a middleware used with Express.js and Node.js that makes the treatment of these files easier.

Before diving into how multer tin can exist customized, allow usa look at its basics. For the example here, let us assume an image of a student has to be uploaded and the image has to exist saved in the folder assets/images in the backend. Get-go of all, it is essential that in the form in the frontend client, enctype=multipart/grade-information is ready.

The multer provides ii parameters in disk storage :

1. destination, which is the destination folder
2. filename, which is the proper name by which we want to save the file.

This can be done equally follows for the in a higher place case -

Hither, we take checks for the file to ensure it is an image and and then we requite it a random proper noun while storing information technology in the backend. You tin choose to not alter the name likewise, in which example, the file volition have the aforementioned proper name every bit the one used by the user.

Now, permit us look at how nosotros can customize this.

What if yous want to shop files in different destinations based on some weather condition?

Let us say the web client allows teachers as well equally students to upload their profile paradigm and their images are stored in the binder assets/images/teachers and avails/images/students respectively. So, before setting the destination of the file, it is of import for us to find out whether this is the image of a teacher or a student.

Ane way this can be washed is by defining a boolean variable in the formData itself which will be set on the client side. But as the multer is a middleware and the file is unremarkably present at the top of whatsoever formData, the other parameters in the form will not be attainable here. For this, a small change is needed and that is to add together the file at the terminate of the formData. In this way, it becomes easier to check whether this is an paradigm of a teacher or a student and hence it can exist saved in the appropriate folder.

So let the boolean variable be isStudent .

Our formData, which contains essential data near the student/teacher when they are registering will look something like this -

As y'all can see, the "image" is appended at the cease of the formData.

Now the multer upload part will be modified as follows -

What if you want to rename the file using values that you retrieve from your database?

Let us say that instead of giving random names to these images, I want to give them some meaningful names in order to ensure that I tin can retrieve these images afterwards. Standing our case, allow the states assume that the images accept to be named equally — "RollNo.jpg" for a Educatee and "StaffNo.jpg" for a Teacher. Hither the RollNo and StaffNo will accept to be retrieved from the database, given the unique IDValues of these people.

Then, one manner to approach this could be to name the file in the filename parameter of multer storage as we take been doing till now and so rename it in the controller function used for this route. The reason for renaming simply in the controller part is that the values can be retrieved from the database only in the controller function.

So our multer upload function will exist the same every bit the 1 above.

Allow the controller function be called setProfileImage().

And the controller function volition do renaming in this fashion -

Hither I am retrieving the roll no / staff no based on whether information technology is a educatee or a teacher and then renaming the file. The database used hither is Mongodb but this can be washed with whatsoever database.

Some other way to save images without renaming them is by adding a new field called imagePath in the Mongoose object which will store the random filename that we gave.

At that place are many more than ways in which multer can exist customized, like information technology tin can handle multiple file uploads different the single file upload in the instance above. More information about the multer tin can be establish here.

That's it!

I promise this turns out to be useful for y'all in using the multer to upload files and to save them in dissimilar ways.

Resource-

https://github.com/expressjs/multer#readme

humphreyshest1992.blogspot.com

Source: https://levelup.gitconnected.com/playing-with-multer-a8a3378194ed

Share this post