Drag and Drop from Desktop

Howard Chen shared this question 5 years ago

How do you simulate drag and drop from the desktop into a file upload field? How do you simulate drag and drop multiple selected files into a file upload field?

Comments (3)


I'd include a screenshot of the desktop in the prototype and then just prototype the drag and drop:



Hello Victor....

While I can see how you've built a rig to allow drag and drop of elements "in browser"....what I think Howard asked, and what I would love to know is how to simulate dragging a file from a finder window into the Prototype to trigger a result.

I've figured out my own way, which is to drag some files over a dropzone (in the Prototype) and create a 3 step trigger....so it turns my dropzone to a gray color (to signify activation) and then I do a 2000 millisecond pause and then have it link to another page for upload progress.....

Unfortunately, i would like to be able to "drop" the files into the window, but when I actually release the mouse (while holding the files), the browser tries to add a new tab and show me the files I dropped.

If there was a way to prevent the browser from changing tabs and for the Prototype to simply change screens like it would under real circumstances, that would be awesome.

Any suggestions?


I am not sure if I completely understand this thread, but If you want to drag and drop a file from desktop into a window -- instead of using the browse button for 'file upload' widget, then you have to drag that file and then drop it on 'browse' button. If you drop it elsewhere, then the file will be placed on top of the page.