Cloudinary for image management in React NextJS App

I recently started building Indian Restaurant Billing App as a part of applying my learning's , after completing Advanced React course by Wes Bos.

In my first article i changed the menu to hamburger menu from the normal menu.

Back to the topic, when we give user to upload image to the web-app, we generally need to store the image somewhere. That somewhere nowadays is cloud.

Now, there are many different services out there but cloudinary is one of the best and easy to use in a React NextJS app and also taught in the course by Wes Bos.

According to them — Cloudinary allows any web application to manage all images in the cloud: upload, resize, crop, detect faces, Facebook & Twitter support, fast CDN delivery.

Now, i have done some backend changes like adding a Prisma database and a Yoga server above it, since my last article and the app looks like this currently.

Image for post
Image for post
Current State of App

So, it’s time to add some image. Head over to https://cloudinary.com/ and create an account. You will be taken to the below dashboard.

Image for post
Image for post
Cloudinary dashboard

Next click on Settings in the top right corner of the dashboard.

Image for post
Image for post
Open settings

Then we click on Upload tab in Settings.

Image for post
Image for post
Goto Upload

Then scroll down and find the link “Add upload preset” and click on it.

Image for post
Image for post
Scroll down and “Add upload preset”

In the next screen, give a Upload preset name, the Signing Mode to be unsigned and also give a Folder name.

Image for post
Image for post
Add some details

Click on Upload Manipulations tab and click on Edit inside Incoming Transformation

In the pop-up give Width as 180, Height leave blank, Mode as Scale and Format & shape as Auto

Click on OK button in pop-up.

Image for post
Image for post
Incoming Transformation Edit

Now, click on +Add Eager Transformation, which will open a similar popup as above case.

In the pop-up give Width as 1000, Height as 1000, Mode as Scale and Format & shape as Auto

Click on OK button in pop-up.

Eager Transformation Edit

Now, Click on the Big Orange Save button on the top right corner of the page to save the configuration.

It will open this screen, which shows our newly added BillingRestro configuration.

Note, that the Incoming Transformation is for the smaller images which is been shown at the Home or Item page in my app and Eager transformation is for the larger images, which the user gets to the product details page. I will not be using Eager transformation in my project, but taught just for completion sake.

Image for post
Image for post
The saved menu

Two things to note from here, before moving to coding is the Nmae of Upload Preset which is BillingRestro in my case. And also the username, which you can find by scrolling up in the page and getting it from Invalidate versioned URLs(highlighted one) or from the upper right corner.

Image for post
Image for post
The username

I have a CreateItem component, which is a plain React form containing input to enter Title and Price.

I added the highlighted code to upload a file by using input type=”file”. On adding a file will call onChange, which calls a method uploadFile.

Also, showing a small Preview to the user of the uploaded image before submitting.

Image for post
Image for post
New File upload

Now, In the uploadFile method we do the API call to Cloudinary with our username and also the upload_preset name from the earlier screenshots.

We get the response back in file.secure_url from cloudinary which we use to update the state, using setState.

Image for post
Image for post
The upload File function

Now, time to test the code. In my adddish page, the CreateItem components gets load.

Image for post
Image for post
The adddish page

Here, i upload an image, add a title and price(in paisa).

Image for post
Image for post
Adding an item

The new item gets added in the home page.

Image for post
Image for post
The homePage

You can get the code till this for the same in this Github link.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store