How to keep the browser from opening a file that I drag onto a prototype in Preview?

I’ve been working through this older example to try to set up an area in my prototype for an LMS where people can drag a file from their file system (Windows Explorer or the Mac OS equivalent) into the prototype. The existing LMS already has this behavior, which I need to replicate at some level in my prototype for an upcoming moderated usability study.

I probably don’t need to actually have the file appear in the prototype. But a problem I am having (when I run that example .rp or my own) is that once I drag the file onto any place in the prototype’s browser window, the browser (Chrome) just opens the file in the same tab instead of keeping the prototype open. This runs completely counter to the behavior of the LMS and will cause task failures throughout my study. How can I prevent this?

I have seen that some people have used JavaScript for this. However, I’ve only completed one Codecademy intro course in JavaScript years ago and also can’t add a bunch of JavaScript development work to the scope of this project, which is for my client. So I need something I can put in action quickly.

I don’t think this will be easy, especially without javascript (not that THAT’s easy either…) I haven’t found any settings in browsers to disable this feature.

I did find this plugin for Chrome, although I have not tried it:

…but then you have the issue of how to detect and respond when the user tries to drag a file on the browser. Probably not too bad to ask them to click a box or something. As far as that goes, you could just ask the user to simulate a file drag & drop by dragging the cursor over a target area, then use the OnDrag event for a dynamic panel to respond as if a document were dragged on top of it.

A few years back a colleague set up a nice prototype with a screenshot of her desktop to use as a background image for the Home page, then created a dynamic panel (dp) with a screenshot of a browser window. She simulated documents on the desktop (again by slicing screenshots of actual document icons, including selected states) and made those into dp’s too. So users could drag a document dp on top of the browser dp to trigger it to change states in sequence: uploading… virus scan… verified… list of uploaded docs. You could do similar thing with a file explorer window as one dp or widget group. When the prototype is run fullscreen (F11 in Chrome) it can look pretty convincing.

So basically, whatever is in your prototype’s page would be put into a dynamic panel and then behind that panel place an image (ideally same size as your monitor/desktop) --you can even use the Page Style: Back Image to assign it as the page background and use one of the “Stretch to…” options if it is a smaller image. Or you can use a flat color for your “desktop background” to keep prototype size smaller.

Pretty straightforward to use condition of “If area of This is over area of BrowserPanel” in the documents’ OnDrag event. Recommend a “Bring This to front” for the OnDragStart, and maybe a selected state with 33% opacity and a dropshadow.