Using Cloudinary as an Alternative for Uploading Images to Database
A full-stack application dealing with public interactions or creating user profiles usually runs into the problem of storing images or profile pictures of users to the database. Of course, you can break the picture into bytes or bits, etc, and store the same but this is a horrible practice and is far too difficult in practice. The other way of doing this is by uploading the picture to a server or a folder, generating a public URL for the upload from there, and storing this URL into the database.
In order to do so, we need a third party or in-house server or similar services that can hold off our images and do the needful. Cloud services like GCP, AWS, etc provide us with this service but they are usually costly and have little storage in the free version. The alternative to these services are third-party providers like CloudConvert, Cloudimage, etc. One such alternative is Cloudinary which provides ample storage of nearly 25 GB in the free plan and many other services.
Using Cloudinary involves 3 major steps:-
- Creating an account on Cloudinary.
- Setting up the system and the SDK that we want to use.
- Making the request to Cloudinary API and extracting the needful.
- Creating an account on Cloudinary is as simple as creating an account on Gmail. Tap on the link and do the needful.
A. npm modules, which can be downloaded easily by doing npm init — y (double hyphen y).
B. Cloudinary packages (or dependencies) which can be downloaded by doing npm install cloudinary-core — save (double hyphen save).
C. An express or node js server. Here we’ll be using an express server so, npm install express — save (double hyphen save).
D. Also, we’ll be needing a preset (which is a key) which is available at:- Settings > Upload > Upload Presets > Enable unsigned uploading. Here a key will be generated copy-paste that one as we’ll be needing it in a while.
3. Making requests to the Cloudinary service can be done in 2 ways:-
→ Making an upload file button/widget, using Axioms to hit the https://api.cloudinary.com/v1_1/your-cloud-url/image/upload URL and extract secure_url from the generated result object. The secure_url will have our image and hitting the URL. Further, this secure_url can be stored in the database and used further.
→ The second way is using the widget which Cloudinary provides by default. This default widget has many integrations of third-party applications like Instagram, Facebook, Dropbox, etc.
Either way works fine, it’s just a matter of preference and feasibility. Here, we’ll be using the latter method and the code for the same is as:-
- This is an HTML file code, so naturally, create an HTML file, say index.html and write the code there.
- The first line creates a simple button. We can apply bootstrap to it or any other custom styling. The second line links the Cloudinary API to our file.
- On pressing the button, mywidget.open() is called which is basically a method triggered by an event listener.
- Inside the method, we have our cloud details (copy the above-copied key to UploadPreset) along with a createUploadWidget method which has self-explanatory fields and is easy to understand.
Ok, so the idea here is to render this HTML page via an express server and run the whole setup and in order to do so, we have:-
The above express code has to be in a separate file and we can run this by typing node filename.js. Now, by hitting http://localhost:8081 we can have our desired result.
The screens would appear as:-
After, uploading the file we can have our URL in the console.
Points to note:-
- Remember, making an unsigned preset key. That is a very unsafe and insecure way of using this API as anyone having that preset can upload files to our Cloudinary storage. So keep changing that and never leave it on the front end. Use environment variables or any other secure way instead. This article is for simple usage of the API and hence it doesn’t focus on the security aspect.
- Highly complex HTML files having complex CSS codes may not get rendered using an express server. As this article is for simple usage of the API hence it doesn’t focus on this aspect. But you would rather try resolving any errors that may occur (if any) or think of using Axioms or any other way of rendering complex CSS.
LASTLY, this article shows an alternative way of using the above API. There are many other ways of using the same, so feel free to read the documentation and try other setups and ways.
Thank you for reading! Hope this article helped.