Create Image upload component for products admin page

[roopeshsn]

For admin, there is an option to create a new product.

Here is the form when you click that "Create Product" button.

For the Image Src field, Freshbey uses ImgBB service. ImgBB is an image hosting service. You can host images and get direct links. If I want to add an image, I'll manually go to ImgBB and upload the image and I will get the direct link. I'll then paste that link into this "Img Src" field. After that when I click the "Update" button the data will be stored in the Database.

As you see this is a very hectic process. I don't want admins or editors to go to that ImgBB service to upload the product image. Create an image upload component so that we can directly upload the image from the local system. That image should directly store in the database.

We have the "Edit Product" option. Take care of the image upload there too.

If you have any queries feel free to reach out. Also, if you have any other solutions do let me know!

[s-vamshi]

Hey i would like to work on this. I have few doubts, so instead of manually uploading to ImgBB, admin need to upload file to the DB right?

[roopeshsn]

Yes, you're right! Also, you should take care of rendering the images in the frontend. Could you explain doing this? Also if you have another solution you're welcome to discuss it.

[s-vamshi]

I have done some research about storing files directly in mongodb and i got to know that it is not the best way but we can try.
and i have a solution like if there is a way to use imgBB API then what we can do is as soon as user uploads the image we can send a request to save in imgBB and then if it can send a response which has success and url(link of image) attributes and upon success we can prefill the hidden input file with the url and update

[s-vamshi]

And yes, imgBB provides API so we can use the api service and upload

[roopeshsn]

I don't like the service of ImgBB because it has a lot of bugs. I ended up with an authentication bug a few days back. Instead, we can Cloudinary. What' 's your thought on this?

[s-vamshi]

Seems like cloudinary is the next better option.

[s-vamshi]

@roopeshsn i have a doubt in case if we are using cloudinary then i need to add a new env variable of api key given by cloudinary and then if everything goes well you are going to merge and then you are going set a new env variable as cloudinary api key in heroku dashboard then deploy. This is the flow right ?

[roopeshsn]

Yes, you're right!

[s-vamshi]

so should i start working on this?

[roopeshsn]

Yeah, go ahead! Work on a new branch. We'll discuss weekly the progress.

[s-vamshi]

Sure.

[s-vamshi]

@roopeshsn do we need to show review of the image after successfully uploading?

[roopeshsn]

Could you share what that review looks like?

[s-vamshi]

I haven't worked on it but beside file input field we can show preview.
I have made PR where we can upload images directly to cloudinary, can you please check?
#74

[roopeshsn]

I will review the code and let you know tomorrow. Also, add screenshots of your work.

[s-vamshi]

Sure!

[s-vamshi]

@roopeshsn
Here is the working demo -

screen-capture.1.mp4

[s-vamshi]

@roopeshsn i have made few modifications to CreateProduct page which are

1. Image src label changed to Product image
2. Set the Image Source field as readOnly. Reason - after uploading image user might change the src path.
3. Changed the order of input (Image Src and File Upload) fields. Reason - before image src input field used to be encountered by the user, as I have made img src field as readOnly user may try to focus the field and might not know that img src input field will get populated after file(image) upload so what i thought was if we place file upload input above then users will upload and then after successfully uploading they might not care about img src field as link will get populated automatically in it.

Any thoughts on this changes?

Here is the demo -

Haven't pushed this changes yet!

[s-vamshi]

Could you share what that review looks like?

Here is the view :-

Desktop View -

Mobile View -

[roopeshsn]

How will it be if that path component is removed? Bear with me for delaying accepting the PR as I don't find time to review the code.

[roopeshsn]

@roopeshsn Here is the working demo -

screen-capture.1.mp4

Could you also show the product page with the image, description, and pricing?

[s-vamshi]

How will it be if that path component is removed? Bear with me for delaying accepting the PR as I don't find time to review the code.

No problem😃.
I didn't get you, like are you asking what happens if img src value has empty string?

[s-vamshi]

@roopeshsn Here is the working demo -
screen-capture.1.mp4

Could you also show the product page with the image, description, and pricing?

[roopeshsn]

How will it be if that path component is removed? Bear with me for delaying accepting the PR as I don't find time to review the code.

No problem😃. I didn't get you, like are you asking what happens if img src value has empty string?

No, I am saying that remove the img path component. Why do we need to show the path of the image to the user?

[s-vamshi]

Yes we can remove path input field and there is no specific reason for showing the path to user.
This will be the view if we remove path component

[s-vamshi]

Could you share what that review looks like?

Here is the view :-

Desktop View -

Mobile View -

is this view ok?

[roopeshsn]

Yes we can remove path input field and there is no specific reason for showing the path to user. This will be the view if we remove path component

Nice

[s-vamshi]

@roopeshsn Can i commit changes then?