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.

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.

Cloudinary dashboard

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

Open settings

Then we click on Upload tab in Settings.

Goto Upload

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

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.

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.

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.

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.

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.

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.

The upload File function

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

The adddish page

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

Adding an item

The new item gets added in the home page.

The homePage

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