Solved

DHTML Drag and Drop Upload

Posted on 2000-05-15
6
862 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
  • 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now