DHTML Drag and Drop Upload


  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.
sempfAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
DanRollinsConnect With a Mentor Commented:
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:


<HTML><HEAD>
<SCRIPT>
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");
  alert(s);

    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";
}
</SCRIPT>
</HEAD>

<BODY>
<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]"
ondragenter="fnCancelDefault()"
ondrop="fnGetInfo()"
ondragover="fnCancelDefault()">
</BODY>
</HTML>

-=-=-=-=-=-=-=-=-
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
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;
alert(sEffect);

.... 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
0
 
CJ_SCommented:
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.

Sorry,
CJ
0
 
sempfAuthor Commented:

  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.

S
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

 
sempfAuthor Commented:
Adjusted points from 300 to 500
0
 
sempfAuthor Commented:
Comment accepted as answer
0
 
sempfAuthor Commented:

  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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.