Drag and Drop like chatGPT

Ask us anything How do I?
1

I would like to implement drag-and-drop file upload in my WeWeb app, similar to ChatGPT. When a user drags a file over a specific “chat” container, a visual indicator should appear. If the file is dropped, it should automatically upload to Xano and be attached to the active chat session.

The feature must work only inside the chat container and should not interfere with other UI elements or interactions.

I have 3 workflows: Drag Enter, Drag Leave and File Drop. However there seems to be a bug when checking Javascript dragging file. I am also not sure that the trigger on mouse down is the right one.

image
image270×161 6.45 KB

image
image832×438 32.4 KB

image
image325×161 5.43 KB

image
image334×233 7.17 KB

Should I create a custom trigger and how or how to solve the drag/drop?

2

The WeWeb’s event isn’t a real event object I think. If you want to get the real event, you need to add the event listener yourself with Custom JS.

1 Like