11

There is a HTML textarea. I'm able to catch that event when a local file is dragged and dropped onto the textarea. But how to obtain the name of the dropped file? (To be modified and inserted into the textarea finally.)

The following expressions returns None in that case:

event.dataTransfer.files
event.dataTransfer.getData('text/plain')

I made a short example for Firefox 3 that is my target platform currently.

<script>
function init() {
    document.getElementById('x').addEventListener('drop', onDrop, true)
}
function onDrop(event) {
    var data = event.dataTransfer.getData('text/plain')
    event.preventDefault()
    alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.')
}
</script>

<body onload='init()'>
<textarea cols=70 rows=20 id='x'></textarea>
Pavel Vlasov
  • 4,206
  • 6
  • 41
  • 54

6 Answers6

14

This is a bit late - but I think what you are looking for is this:

event.dataTransfer.files[0].name

You can also get the following properties:

event.dataTransfer.files[0].size
event.dataTransfer.files[0].type

And you can loop thru these files with the following:

var listOfNames='';
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){
    listOfNames+=event.dataTransfer.files[i].name + '\r\n';
}

Btw - if you are using jQuery then the dataTransfer object can be found here:

event.originalEvent.dataTransfer.files[0].name
Jimmery
  • 9,783
  • 25
  • 83
  • 157
  • 1
    i want local file path ondrop. – Kishan Apr 30 '15 at 12:57
  • 1
    you'll find it if you console log the file object, use something like (this is assuming you are using jQuery): `console.log(event.originalEvent.dataTransfer.files[0])` – Jimmery Apr 30 '15 at 15:01
4

Don't know if it's still relevant, but I faced the same problem. Here's how I solved it:

  1. Create a normal upload form with a single input field (type="file")

  2. Add this HTML attribute to the input field:

    dropzone="copy file:image/png file:image/jpg file:image/jpeg"

  3. Set JQuery listener or whatever to catch the "drop"-event on the input field

When you drag & drop a local image on the input field, the "value" attribute is filled automatically and you can process it like any other HTML form.

I also wrapped the form into another HTML element (div), set the size of the div and set overflow:hidden via CSS - this way, you can get rid of the "browse" button. It's not nice, but it works. I also used the AjaxForm plugin to upload the image in the background - works very nice.

Jan Petzold
  • 1,561
  • 1
  • 15
  • 24
  • "When you drag & drop a local image on the input field, the "value" attribute is filled automatically and you can process it like any other HTML form" can you please explain this better? i tried but i can't understand how to set the value to the input type file. Shouldn't this be denied cause of some security risks? – Lorenzo Sciuto Aug 27 '12 at 14:10
  • As far as I remember you don't have to do anything explicitly. However, for processing the form with the image, it is necessary that the input-field has a value. This value cannot be set via Javascript. But if you drag and drop the image to the input field, the "value" attribute gets set automatically and the form can be submitted. – Jan Petzold Aug 27 '12 at 14:19
0

as far as I know, you need to obtain an instance of nsIFile in order to get the file path (the File class does not offer this feature).
This MDC page explains how to do this: https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types#file.
Note that although not listed in the previous link, obtaining an nsIFile instance requires privileges escalation (cf. my answer to Can I drag files from the desktop to a drop area in Firefox 3.5 and initiate an upload? show how to do this).

Community
  • 1
  • 1
Guillaume G.
  • 385
  • 1
  • 5
0

im doing it by detecting mouseover and mousedown over the "Drop" zone

jsbuster
  • 173
  • 7
-2

Alemjerus is correct, you don't have access to what you're looking for.

The behavior you mentioned in reply to his comment is the default behavior of certain browsers. For instance, with the stackoverflow textarea for this entry, if I use Safari and drag a file into it, it places the file's path into the textarea. With firefox 3.5, on the other hand, it attempts to open the file with the browser.

Basically, the "drag and drop" functionality you're attempting to implement is something thats handled by the browser and OS on the client machine -- you can't use Javascript for this purpose.

Skone
  • 745
  • 4
  • 13
  • 2
    I know about existance of security in JS. But you and alemjerus are wrong in this particular case. Install Firefox 3.6 and run that pure html/js example: https://developer.mozilla.org/En/DragDrop/DataTransfer#Example And you will be able to access not only file name but its content ever. The single thing I can't dig out still is how to obtain the *full* file path... – Pavel Vlasov Jan 09 '10 at 05:29
  • 1
    alemjerus and Skone **were** in fact right. Local file access was added in Firefox 3.6 (https://developer.mozilla.org/en-US/Firefox/Releases/3.6#HTML) which was initially released January 21, 2010 (http://en.wikipedia.org/wiki/Firefox_3.6) after they posted their answers. A feature on stackoverflow to mark outdated answers would be great. – Krisztián Balla Dec 19 '14 at 09:23
-3

You can not do it with Javascript because of security reasons. Javascript VM has no direct access to OS file system. You can only drag and drop text.

alemjerus
  • 8,023
  • 3
  • 32
  • 40
  • But it is not an usual direct access: a user drops file by her own wish. And an application needs just a file name, not more. What's wrong here? For example the following visual editor is *able* to obtain dropped file's name (you'll need to be logged in unfortunately): http://www.livejournal.com/update.bml and it's made of HTML still. – Pavel Vlasov Jan 07 '10 at 20:19
  • 5
    Not true anymore. Any browser that has a dataTransfer.files can read the filename. – Jimmery Sep 27 '12 at 13:47