johndatserakis / file-upload-with-preview

🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

Home Page:https://johndatserakis.github.io/file-upload-with-preview

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[FEATURE] Ability to set a "main image"

oldcastlehq opened this issue · comments

Hi,

It would be very handy if we could set the "main image" from the preview of the images that we just uploaded.

For example. Let's say that we have a product_new page, where we use it to create the product page in our CRUD. In the image section, we can select multiples images to be uploaded. During the preview, it would be nice if we could select/tag one image to be the "main image" of the product. This is a common setup in ecommerce websites. You have the main product image and the rest are used for carousel or gallery. You could add a hover on the image, and on the left/right top corner a label/button/icon saying "set main image" or something like that. It would be like a radio element. You can only set one main image. Now, I just don't know how you could upload/submit them to the server. Maybe the main image can create a hidden input for it? But I would need a way to differentiate the main image from the others.

I hope I made it clear.

Cheers.

Hey there - thanks for your question.

I believe I'm following what you're saying. Something like that would be out of scope for this project, but would be possible using the cachedFileArray that you can use after a user makes a selection.

You could loop over the cachedFileArray and show back the images in a custom made div or whatever. Then, allow a user to choose an image. When the user "selects" a "main" image, you could grab the id or name or some identifier on click, and send up that identifier when you make your POST request as another parameter. Then you can assign an image as the main image. I think in this way, it's very possible for your to build this out yourself using the cachedFileArray.

Another way would be to fork this project and build this functionality right into your fork.

Hope this helps, thank you.

I got it. Thank you.