Question

I’m developing an interactive file-uploader in JavaScript and HTML in which I need to access the currently dragging files filename (the one that triggers the dragenter event).

But there’s a problem, the events dataTransfer member does not contain any files, and I really need to know the filename before the drop event is thrown. Is it possible?

Thanks in advance.

Answer 1

I guess you might have to declare a local variable for it….and remember to initialize it when drag start….kill it when drag end…(dragend/drop)

assign it in “DragStart”…..(NOTE: in dragstart u can assign any value to dataTransfer by using “event.dataTransfer.setData”….but it is not accessible in DragEnter/DragOver)

because “DragEnter” can not access dataTransfer.getData() due to security reason…
it is ONLY accessible in “onDrop” action…..

see links below:
//Get Data can not be used here (for cross frame) due to:
http://msdn.microsoft.com/en-us/library/ie/ms536436(v=vs.85).aspx

//use dataTransfer.getData in DragEnter/DragOver doesn’t work for Chorme
http://code.google.com/p/chromium/issues/detail?id=50009

//dataTransfer.getData is ONLY accessible in DROP for security reason….
http://code.google.com/p/chromium/issues/detail?id=2141

OR you can check on the following link…see if it is helpful:
http://weblog.bocoup.com/using-datatransfer-with-jquery-events/

MORE:
You can also use localStorage/sessionStorage call, which will save the data into browser cache, localStorage can be used in Cross Window (but same browser), sessionStorage is only accessible of the same session.
Just do something like:
In your DragStart ->

localStorage.setItem("DraggedFileName",myFileName);

In your DragEnter ->

var myFileName = undefined;
if(localStorage.getItem("DraggedFileName"))
myFileName = localStorage.getItem("DraggedFileName");

In your DropEvent and DragEnd ->

if(localStorage.getItem("DraggedFileName"))
    localStorage.removeItem("DraggedFileName"); //Remove after Drop/DragEnd, clear it

Hope it helps….