Solved

DHTML Drag and Drop Upload

Posted on 2000-05-15
6
885 Views
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.
0
Comment
Question by:sempf
[X]
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
6 Comments
 
LVL 22

Expert Comment

by:CJ_S
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.

Sorry,
CJ
0
 

Author Comment

by:sempf
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.

S
0
 

Author Comment

by:sempf
ID: 2835177
Adjusted points from 300 to 500
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 49

Accepted Solution

by:
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:


<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
 

Author Comment

by:sempf
ID: 2867685
Comment accepted as answer
0
 

Author Comment

by:sempf
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

751 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