DHTML Drag and Drop Upload

Posted on 2000-05-15
Last Modified: 2008-03-06

  IE Only.

  I need to create a DHTML event handler that will read the properties of a client-side file that is dragged onto the screen from the desktop, so that I can place the filename and path into a textbox and upload with SAfileup.
Question by:sempf
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
LVL 22

Expert Comment

ID: 2810509
This cannot be done with DHTML, nor with javascript. When you have a file, and drag it to the HTML page, then it will be interpretted as if you want to open that file or want to download that file. There's no way you can get that to work with drag and drop.


Author Comment

ID: 2810611

  I take exception to that.  In Windows, a folder opens in a browser window, just like an HTML page.  You can drag from HTML page to HTML page.  The only difference is that it is a named object you are dragging (windowName.objectName.href).  Now, all I am doing is dragging something that I don't know a name for.  SURELY there is a way around that.


Author Comment

ID: 2835177
Adjusted points from 300 to 500

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 49

Accepted Solution

DanRollins earned 500 total points
ID: 2867337
Quoted From MDSN (search for: ondrop and security):

The getData method enforces cross-frame security and allows data transfers within the same domain only. To the user this means that dragging a selection between different security protocols, such as HTTP and HTTPS, will fail. In addition, dragging a selection between two instances of the browser with different security levels, where the first instance is set to medium and the second is set to high, will fail. Finally, dragging a selection into the browser from another drag-enabled application, such as Microsoft® Word, also will fail.

Here's some code for testing:

function fnSetInfo() {
  event.dataTransfer.setData("Text", "Data I set on start of drag" );
  event.dataTransfer.effectAllowed = "Copy";       // Copies text.

// OnDrop
function fnGetInfo() {

  var s= "URL: " + event.dataTransfer.getData("URL") +"\n"
      s+="Text: "+ event.dataTransfer.getData("Text");

    oTarget.value = event.dataTransfer.getData("Text");
//  event.returnValue= false;    // Cancels default action (lockup if uncommented )
    event.dataTransfer.dropEffect = "Copy";    // Sets cursor

function fnCancelDefault() {
  event.returnValue= false;
  event.dataTransfer.dropEffect = "Copy";

<IMG ID=oSource SRC="F01.bmp" ondragstart="fnSetInfo()">
<P><BR><P>Drag the image and drop it onto the text box below.</P>
<INPUT ID="oTarget" VALUE="[drop image here]"

when you drag the img into the edit box, all works great.  But when you drag from the Explorer, the incoming dataTransfer object has null for both available data types.

In fnGetInfo(), if I uncomment the
   event.returnValue= false;
line, I get a frozen window (but only when dragging from the Explorer).

In fnGetInfo(), if I add commands to access other event.dataTransfer properties, I get errors.  For instance:

var sEffect= event.dataTransfer.effectAllowed;

.... works fine when dragging the picture, but fails with...

  Unexpected call to method or property access

.... when dropping a file from Explorer.
That is probably a security-related message.

Some commands, like...

event.dataTransfer.setData("Text", "hi there" );

.... work fine until you drop an Explorere file.  Then the window locks up.

I tried lowering browser security to the minimum and even ran the HTM as an HTA, but the drop-handling seems to be blocked at all levels.

-=-=-=-=- Avenues to explore:
Quite likely you could embed an ActiveX object in the window and drag from that, but I saw no easy way to do that.

Also, if you have an icon on the desktop of an HTA, you can drop files onto it and they are available to the JScript as command-line arguments.  From there you could do whatever you needed.

-=-=-=-=- In parting:
I'll be interested to see if anyone finds a workaround, because that could probably be considered a "exploitable security breach" and Microsoft would plug the hole in the next release.

-- dan

Author Comment

ID: 2867685
Comment accepted as answer

Author Comment

ID: 2867686

  Though the answer wasn't at ALL what I wanted to hear, I give him an A for effort.  And I might just try the HTA thing.  oFoto and other online photo joints use an ActiveX control or Java applet to solve this problem, and now we know why.

  Thanks, Dan.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question