how to Drag and Drop Image - Drop area should take only one image
Question
Application Type
Reactive

Hi All,

I want to drag an image to the drop area and Currently, I can add multiple images in a single Drop area, but my requirement is I should add only one image and if I add one more it should replace the old one. how I can achieve this requirement? 

Current Screen:

Using this javaScript in Drop Area and js library.

Can someone please help me in implementing this?

Thank you.

Champion
Solution

Hello Sai 

Your OML is missing with the Logic of Replacing the Current Image which is added in the Block of Component that display the images. 


With the Drop Area, you need to complete your OML with the Image Side Bar Section too. 

Yes working, I am using the wrong block. 

Thank you Manish.

Hi @sai kumar 

Have you tried to use the forge component Drag And Drop in Reactive for this functionality?

Thanks

yes, I Have tried but in my application, it is taking multiple images. Followed the same approach.

Hi @sai kumar ,

If you want to replace new image with the previous one. Then in that component search logic for drag and drop. You are updating image. So, need to find logic and change according to that. Also update logic with update image. This will replace image

In the existing component, I think there is no logic is used and working as it is mentioned and in my application, I followed the same approach but it is adding multiple images.

Hi @sai kumar  ,

Can you share your oml? I was able to replace the existing image in a single drop area using  Drag And Drop in Reactive component. So it will be easy to figure out where you are doing wrong if you can share your oml.

Thanks

Hi Harika,

Please check this oml file.

BlocksExerciseDrag.oml

Attaching the modified oml. You have missed some logic which is to replace the existing image with new . i have added and its working now.

BlocksExerciseDrag.oml

Champion
Solution

Hello Sai 

Your OML is missing with the Logic of Replacing the Current Image which is added in the Block of Component that display the images. 


With the Drop Area, you need to complete your OML with the Image Side Bar Section too. 

Yes working, I am using the wrong block. 

Thank you Manish.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.