Simplify image upload for admin in products #74

s-vamshi · 2022-10-05T16:44:43Z

Simplifying product image upload process for admins by using multer-storage-cloudinary npm package

…implify-image-upload-for-admin-in-products

SyedMuzamilM · 2022-10-05T17:09:38Z

Code looks ok. Can you share a demo video so that we can see how is it working. Try to upload an image and then show the product page for which you uploaded this image.

roopeshsn · 2022-10-07T14:36:32Z

Thanks for bearing with me @s-vamshi I'll summarize what you've done. If I am wrong correct me.

The first step is getting the image from the user and immediately uploading it to the Cloudinary storage.
Then the app is waiting to receive the image URL from the Cloudinary.
Once the URL is received then along with other data like name, price, etc. will be saved to the DB.

Am I right?

I have some questions to address.

If the user not selecting the image then what will be the message shown to the user?
What if Cloudinary service is down? How the app handles it?

You have used the try-catch block. It will be nice if you simulate an error and add a screenshot if possible.

s-vamshi · 2022-10-07T15:01:17Z

@roopeshsn
No problem.
Yes you are right.

If the user is not selecting the image this message is shown -
Tbh I don't know how the app will respond when cloudinary service is down, I need to check if there is any way to simulate if service is down.
Yes I will simulate and add a screenshot

roopeshsn · 2022-10-07T15:23:57Z

No simulating Cloudinary error is not required. Is there any way to change the error message meaningful?

s-vamshi · 2022-10-07T15:29:27Z

Yes i am working on it.

roopeshsn · 2022-10-07T15:38:29Z

Also, have you taken care of when the admin wants to edit the product image?

roopeshsn · 2022-10-07T15:42:17Z

@roopeshsn No problem. Yes you are right.

If the user is not selecting the image this message is shown -

Tbh I don't know how the app will respond when cloudinary service is down, I need to check if there is any way to simulate if service is down.

Yes I will simulate and add a screenshot

No, I am asking about what will be the case if the user selects a video or a text file.

s-vamshi · 2022-10-07T16:16:46Z

Also, have you taken care of when the admin wants to edit the product image?

NO
Thanks for pointing this out, I will start working on product edit page also.

s-vamshi · 2022-10-07T16:26:07Z

@roopeshsn No problem. Yes you are right.

If the user is not selecting the image this message is shown -

Tbh I don't know how the app will respond when cloudinary service is down, I need to check if there is any way to simulate if service is down.

Yes I will simulate and add a screenshot

No, I am asking about what will be the case if the user selects a video or a text file.

It will not upload to cloud hence image Src state will be an empty string
And this is how it looks without any error msg we need to display an error message right?

roopeshsn · 2022-10-07T16:30:48Z

@roopeshsn No problem. Yes you are right.

If the user is not selecting the image this message is shown -

Tbh I don't know how the app will respond when cloudinary service is down, I need to check if there is any way to simulate if service is down.

Yes I will simulate and add a screenshot

No, I am asking about what will be the case if the user selects a video or a text file.

It will not upload to cloud hence image Src state will be an empty string And this is how it looks without any error msg we need to display an error message right?

Yes, we need to take care of all the edge cases.

roopeshsn · 2022-10-07T17:01:36Z

As of now, I will merge the PR up to what you've done. Y After that you can work on the edit product route. What's your thought?

roopeshsn · 2022-10-07T14:49:52Z

backend/routes/uploadRoutes.js

@@ -1,20 +1,25 @@
 const path = require('path')
 const express = require('express')
 const multer = require('multer')
+const cloudinary = require("cloudinary").v2
+const { CloudinaryStorage } = require("multer-storage-cloudinary")


What did this package do?

Instead of storage to local system using multer we are using a similar package called multer storage cloudinary to store images directly in cloud.
And to upload images we need api keys so we need to use cloudinary package.

roopeshsn · 2022-10-07T14:55:26Z

backend/routes/uploadRoutes.js

-      null,
-      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`,
-    )
+cloudinary.config({


We have a config folder in the backend. Is it possible to change the config code there?

I think yes can i make all this changes tomorrow?

No problem. Take your own time. I highly encourage you to contribute in your free time!

@roopeshsn I have moved cloud config to db/config.

s-vamshi · 2022-10-08T05:46:13Z

No simulating Cloudinary error is not required. Is there any way to change the error message meaningful?
@roopeshsn
Modified all error messages while submitting form

s-vamshi · 2022-10-08T06:39:40Z

No, I am asking about what will be the case if the user selects a video or a text file.

Made changes now when user uploads other files displays this msg -

s-vamshi · 2022-10-08T07:13:44Z

Also, have you taken care of when the admin wants to edit the product image?

@roopeshsn This is the change i have made in edit product page. Is it ok?

roopeshsn · 2022-10-08T12:13:42Z

Also, have you taken care of when the admin wants to edit the product image?

@roopeshsn This is the change i have made in edit product page. Is it ok?

There is no need to render the previous product image.

s-vamshi · 2022-10-08T13:43:01Z

There is no need to render the previous product image.

@roopeshsn removed previous product image.
But found a bug which is not related to current issue or commits.
So the bug is when we are in admin/productlist route, when we click on edit button and update a product then we will get again redirected to admin/productlist. Here starts the problem now when we want to edit any other product we will get an error Uncaught TypeError: Cannot read properties of undefined (reading 'name') at ProductEditScreen.js:47:1

roopeshsn · 2022-10-08T15:37:58Z

There is no need to render the previous product image.

@roopeshsn removed previous product image. But found a bug which is not related to current issue or commits. So the bug is when we are in admin/productlist route, when we click on edit button and update a product then we will get again redirected to admin/productlist. Here starts the problem now when we want to edit any other product we will get an error Uncaught TypeError: Cannot read properties of undefined (reading 'name') at ProductEditScreen.js:47:1

Yes, this bug persists. If possible could you create an issue for the same?

s-vamshi · 2022-10-08T15:41:49Z

Ok. I will create an issue and can you review my PR ?

roopeshsn · 2022-10-08T15:52:08Z

How we can handle this? If I am a product is getting updated with a new image and then the old image should get deleted in Cloudinary. Would like to know your thoughts.

roopeshsn · 2022-10-08T15:52:35Z

Ok. I will create an issue and can you review my PR ?

So updating a product with a new image is working fine right?

s-vamshi · 2022-10-08T15:56:38Z

How we can handle this? If I am a product is getting updated with a new image and then the old image should get deleted in Cloudinary. Would like to know your thoughts.

Ya this is a great idea I will start working on it.

s-vamshi · 2022-10-08T15:56:52Z

Ok. I will create an issue and can you review my PR ?

So updating a product with a new image is working fine right?

Yes

roopeshsn · 2022-10-08T15:58:26Z

Wait, I will merge this PR then you can create a new issue and work on that. The code is not formatted properly. We have a prettier command to format recursively. Check the package.json file.

roopeshsn · 2022-10-08T16:13:59Z

Appreciate your work @s-vamshi

s-vamshi · 2022-10-10T11:40:22Z

How we can handle this? If I am a product is getting updated with a new image and then the old image should get deleted in Cloudinary. Would like to know your thoughts.

@roopeshsn should i start working on this feature or should i wait until 404 page feature gets merged?

s-vamshi added 3 commits October 5, 2022 22:09

uploading product images directly to cloudinary

5282270

updated README file

ef16d3d

Merge branch 'master' of https://github.com/roopeshsn/freshbey into s…

53e20fd

…implify-image-upload-for-admin-in-products

s-vamshi mentioned this pull request Oct 5, 2022

Create Image upload component for products admin page #54

Closed

This comment was marked as resolved.

Sign in to view

roopeshsn suggested changes Oct 7, 2022

View reviewed changes

s-vamshi added 2 commits October 8, 2022 09:14

cloud config shifted from uploadRoute to db/config

c7ba52e

dotenv config method invocated at top

b3ff3ec

err msg for not uploading image in CreateProduct

00c36a5

direct image upload feature added in ProductEdtScr

60c6a10

code formatted using prettier

c6b006b

roopeshsn approved these changes Oct 8, 2022

View reviewed changes

roopeshsn merged commit 819541d into roopeshsn:master Oct 8, 2022

roopeshsn added the hacktoberfest-accepted Accepted PR for hactoberfest label Oct 8, 2022

s-vamshi deleted the simplify-image-upload-for-admin-in-products branch October 9, 2022 03:41

s-vamshi restored the simplify-image-upload-for-admin-in-products branch October 9, 2022 05:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify image upload for admin in products #74

Simplify image upload for admin in products #74

s-vamshi commented Oct 5, 2022 •

edited

Loading

SyedMuzamilM commented Oct 5, 2022

This comment was marked as resolved.

roopeshsn commented Oct 7, 2022

s-vamshi commented Oct 7, 2022 •

edited

Loading

roopeshsn commented Oct 7, 2022 •

edited

Loading

s-vamshi commented Oct 7, 2022

roopeshsn commented Oct 7, 2022

roopeshsn commented Oct 7, 2022 •

edited

Loading

s-vamshi commented Oct 7, 2022

s-vamshi commented Oct 7, 2022

roopeshsn commented Oct 7, 2022

roopeshsn commented Oct 7, 2022

roopeshsn Oct 7, 2022

s-vamshi Oct 7, 2022

roopeshsn Oct 7, 2022

s-vamshi Oct 7, 2022

roopeshsn Oct 7, 2022

s-vamshi Oct 7, 2022

s-vamshi Oct 8, 2022

s-vamshi commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 8, 2022 •

edited

Loading

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

roopeshsn commented Oct 8, 2022

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

roopeshsn commented Oct 8, 2022 •

edited

Loading

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 10, 2022

Simplify image upload for admin in products #74

Simplify image upload for admin in products #74

Conversation

s-vamshi commented Oct 5, 2022 • edited Loading

SyedMuzamilM commented Oct 5, 2022

This comment was marked as resolved.

roopeshsn commented Oct 7, 2022

s-vamshi commented Oct 7, 2022 • edited Loading

roopeshsn commented Oct 7, 2022 • edited Loading

s-vamshi commented Oct 7, 2022

roopeshsn commented Oct 7, 2022

roopeshsn commented Oct 7, 2022 • edited Loading

s-vamshi commented Oct 7, 2022

s-vamshi commented Oct 7, 2022

roopeshsn commented Oct 7, 2022

roopeshsn commented Oct 7, 2022

roopeshsn Oct 7, 2022

Choose a reason for hiding this comment

s-vamshi Oct 7, 2022

Choose a reason for hiding this comment

roopeshsn Oct 7, 2022

Choose a reason for hiding this comment

s-vamshi Oct 7, 2022

Choose a reason for hiding this comment

roopeshsn Oct 7, 2022

Choose a reason for hiding this comment

s-vamshi Oct 7, 2022

Choose a reason for hiding this comment

s-vamshi Oct 8, 2022

Choose a reason for hiding this comment

s-vamshi commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 8, 2022 • edited Loading

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

roopeshsn commented Oct 8, 2022

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

s-vamshi commented Oct 8, 2022

roopeshsn commented Oct 8, 2022 • edited Loading

roopeshsn commented Oct 8, 2022

s-vamshi commented Oct 10, 2022

s-vamshi commented Oct 5, 2022 •

edited

Loading

s-vamshi commented Oct 7, 2022 •

edited

Loading

roopeshsn commented Oct 7, 2022 •

edited

Loading

roopeshsn commented Oct 7, 2022 •

edited

Loading

s-vamshi commented Oct 8, 2022 •

edited

Loading

roopeshsn commented Oct 8, 2022 •

edited

Loading