Welcome 🤗 to the concluding part of this tutorial. It's being a long roll. We are now able to see nodejs, cloudinary and postgresql as 3 persons working together to solve our problem.
Getting Started
Creating APIs
Delete API
Update API
We started with the introductory part on Setting Up a Simple, Secure and Robust Node JS Server up to Persisting and Retrieving images using cloudinary and Postgresql Through Nodejs.
Today we want to look at deleting and updating images on cloudinary.
Getting Started
As a prerequisite to this tutorial, please take the last tutorial to be up to speed.
If you are coming from the previous tutorial, then move to Creating APIs.
However, if you are just joining us, please find the starter project for this tutorial here.
At this point, I want to believe that we are all up to speed!!!
Now to the business of the article...
Creating APIs
Delete API
- In the app.js file, start with the following code
// delete image
app.delete("delete-image/:cloudinary_id", (request, response) => {
});
- Next, we want to get the unique ID of the image we want to delete from the URL i.e
cloudinary_id. So inside the code above add:
const { cloudinary_id } = request.params;
We now start the deleting process
- First, we delete from the cloudinary. Add the following code to delete the image from cloudinary
cloudinary.uploader
.destroy(cloudinary_id)
.then((result) => {
response.status(200).send({
message: "success",
result,
});
})
.catch((error) => {
response.status(500).send({
message: "Failure",
error,
});
});
At this point, our API can delete the image from cloudinary only (You can check it out in postman). However, we want to also get rid of the record we have in our postgres database
- Second, we delete from our postgres database. To do so, replace the code in the
thenblock with the followingquery:
db.pool.connect((err, client) => {
// delete query
const deleteQuery = "DELETE FROM images WHERE cloudinary_id = $1";
const deleteValue = [cloudinary_id];
})
- Execute the query with the following code underneath it:
// execute delete query
client.query(deleteQuery, deleteValue)
.then((deleteResult) => {
response.status(200).send({
message: "Image Deleted Successfully!",
deleteResult
});
}).catch((e) => {
response.status(500).send({
message: "Image Couldn't be Deleted!",
e
});
});
So our API should look like this:
// delete image
app.delete("/delete-image/:cloudinary_id", (request, response) => {
// unique ID
const { cloudinary_id } = request.params;
// delete image from cloudinary first
cloudinary.uploader
.destroy(cloudinary_id)
// delete image record from postgres also
.then(() => {
db.pool.connect((err, client) => {
// delete query
const deleteQuery = "DELETE FROM images WHERE cloudinary_id = $1";
const deleteValue = [cloudinary_id];
// execute delete query
client
.query(deleteQuery, deleteValue)
.then((deleteResult) => {
response.status(200).send({
message: "Image Deleted Successfully!",
deleteResult,
});
})
.catch((e) => {
response.status(500).send({
message: "Image Couldn't be Deleted!",
e,
});
});
})
})
.catch((error) => {
response.status(500).send({
message: "Failure",
error,
});
});
});
The time has arrived for us to put our API to the test.
The following is my cloudinary media library with two images I uploaded already. Take note of their unique ID (public_id). We discussed this in the previous tutorials.
If you don't already have that, please use the persist-image API to upload some images.
Now let's proceed to postman
Notice, the unique ID as it matches one of the image in my cloudinary media library.
From the output, we executed the DELETE command and that deleted one ROW from our image TABLE in our database.
Now this is my media library with one of the images remaining:
Walahhhh... We are now able to get rid of an image.
Do take a break if you desire one. ✌🏾
If you are ready, I am ready to update images
Update Image API
- Below the
delete-imageAPI, let's start creating theupdate-imageAPI with the following code:
// update image
app.put("/update-image/:cloudinary_id", (request, response) => {
});
All codes will live in there.
- Collect the unique cloudinary ID and new image details from the user with the following code:
// unique ID
const { cloudinary_id } = request.params;
// collected image from a user
const data = {
title: request.body.title,
image: request.body.image,
};
- Delete the image from cloudinary with the following code
// delete image from cloudinary first
cloudinary.uploader
.destroy(cloudinary_id)
// upload image here
.then()
.catch((error) => {
response.status(500).send({
message: "failed",
error,
});
});
- Next, upload another image to cloudinary. To do that, enter the following code into the then block
() => {
cloudinary.uploader
.upload(data.image)
.then()
.catch((err) => {
response.status(500).send({
message: "failed",
err,
});
});
}
- Now let's replace our initial record with the new image details. Replace the content of the
thenblock with the following:
(result) => {
db.pool.connect((err, client) => {
// update query
const updateQuery =
"UPDATE images SET title = $1, cloudinary_id = $2, image_url = $3 WHERE cloudinary_id = $4";
const value = [
data.title,
result.public_id,
result.secure_url,
cloudinary_id,
];
});
}
- We execute the query using the following code just beneath the query declaration
// execute query
client
.query(updateQuery, value)
.then(() => {
// send success response
response.status(201).send({
status: "success",
data: {
message: "Image Updated Successfully"
},
});
})
.catch((e) => {
response.status(500).send({
message: "Update Failed",
e,
});
});
At this point, this is what I have
// update image
app.put("/update-image/:cloudinary_id", (request, response) => {
// unique ID
const { cloudinary_id } = request.params;
// collected image from a user
const data = {
title: request.body.title,
image: request.body.image,
};
// delete image from cloudinary first
cloudinary.uploader
.destroy(cloudinary_id)
// upload image here
.then(() => {
cloudinary.uploader
.upload(data.image)
// update the database here
.then((result) => {
db.pool.connect((err, client) => {
// update query
const updateQuery =
"UPDATE images SET title = $1, cloudinary_id = $2, image_url = $3 WHERE cloudinary_id = $4";
const value = [
data.title,
result.public_id,
result.secure_url,
cloudinary_id,
];
// execute query
client
.query(updateQuery, value)
.then(() => {
// send success response
response.status(201).send({
status: "success",
data: {
message: "Image Updated Successfully"
},
});
})
.catch((e) => {
response.status(500).send({
message: "Update Failed",
e,
});
});
});
})
.catch((err) => {
response.status(500).send({
message: "failed",
err,
});
});
})
.catch((error) => {
response.status(500).send({
message: "failed",
error,
});
});
});
It's Testing Time!!!
This is my postman in the image below:
Take note of the unique cloudinary ID which matches the image left in my cloudinary media library.
Now take a look at my cloudinary media library in the image that follows:
Take note of the new image replacing the initial one in my media library above
Also, see that the unique clodinary ID matches that in my database with the new title. See image below:
Yayeh!!!
You did awesomely great!!! 💪
We just completed a CRUD application with nodejs, cloudinary and postgresql!!!
Conclusion
We have been able to complete what we started a couple of months ago - A CRUD App. If you started from the beginning with us, then you will see that we started from nothing but now we are dinning with not just nodejs but cloudinary and postgres.
All codes can be found here
EBEREGIT
/
server-tutorial
This is a tutorial was to teach how to create a simple, secure and robust nodejs server but we have expanded our scope to cloudinary and postgres
Server-tutorial
This is a tutorial was to teach how to create a simple, secure and robust nodejs server but we have expanded our scope to cloudinary and postgres
Full details on how to build out this server is found here.
Full details on how to upload images to cloudinary using nodejs is found here.
Full details on how to persist and retrieve images to cloudinary using nodejs and postgres is found here.
Full details on how to delete and update images to cloudinary using nodejs and postgres is found here.
Full details on Nodejs Code Structure Optimization With Express Routing is found here.
Dependences
SETTING UP
- Fork this repository
- Clone the repositury to your machine
- Open up a terminal
- Navigate into the project directory
- Run
npm installto install all needed dependencies - Run
nodemon indexto spin…
Please keep up the good learning!!!
You will notice that our App.js file is now too long and we are getting lost in our code. That is going to be fixed in the next article where we will be doing something nice on Nodejs Code Structure Optimization With Express Routing.
If you have questions, comments or suggestions, please drop them in the comment section.
You can also follow and message me on social media platforms.
Thank You For Your Time.
Top comments (0)