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.
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.
Next click on Settings in the top right corner of the dashboard.
Then we click on Upload tab in Settings.
Then scroll down and find the link “Add upload preset” and click on it.
In the next screen, give a Upload preset name, the Signing Mode to be unsigned and also give a Folder name.
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.
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.
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.
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.
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.
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.
Now, time to test the code. In my adddish page, the CreateItem components gets load.
Here, i upload an image, add a title and price(in paisa).
The new item gets added in the home page.
You can get the code till this for the same in this Github link.