Go Premium for a chance to win a PS4. Enter to Win


DHTML Drag and Drop Upload

Posted on 2000-05-15
Medium Priority
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
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 49

Accepted Solution

DanRollins earned 2000 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone 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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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

971 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