In the following chrome user script, how can I get a url for an image that I drag from my desktop? Where I have the debugger line, I'm getting the empty string for e.dataTransfer.getData("text") and e.dataTransfer.getData("url")

// ==UserScript==
// @match http://*/*
// @match https://*/*
// ==/UserScript==

function preventDrag(e) {
  e.stopPropagation();
  e.preventDefault();
}

function handleDrop(e) {
  console.log("Just dropped: " + e.dataTransfer.files[0].name);
  debugger
  // TODO: grab the url for e.dataTransfer.files[0]

  e.stopPropagation();
  e.preventDefault();
}

document.addEventListener('drop', handleDrop, false);
document.addEventListener('dragenter', preventDrag, false);
document.addEventListener('dragover', preventDrag, false);

In the following chrome user script, how can I get a url for an image that I drag from my desktop? Where I have the debugger line, I'm getting the empty string for e.dataTransfer.getData("text") and e.dataTransfer.getData("url")

// ==UserScript==
// @match http://*/*
// @match https://*/*
// ==/UserScript==

function preventDrag(e) {
  e.stopPropagation();
  e.preventDefault();
}

function handleDrop(e) {
  console.log("Just dropped: " + e.dataTransfer.files[0].name);
  debugger
  // TODO: grab the url for e.dataTransfer.files[0]

  e.stopPropagation();
  e.preventDefault();
}

document.addEventListener('drop', handleDrop, false);
document.addEventListener('dragenter', preventDrag, false);
document.addEventListener('dragover', preventDrag, false);

• javascript
• google-chrome-extension
• drag-and-drop
• dom-events

• So the call to console log does correctly log the filename? – Ben Smith Commented Apr 10, 2014 at 0:09
• @Fresh yes, it reports the filename, but without any path. – Ben Taitelbaum Commented Apr 10, 2014 at 5:47
• 1 Not sure to understand well, but if I do, you won't be able to have a file path (meaning the dropped file fullpath). It's a "protection" from browsers. But you can at least get the name of it. Here is a jsFiddle of how to do it: jsfiddle.net/U8yqL/1 – Leiko Commented Apr 10, 2014 at 16:15
• @Leiko Thanks for the fiddle! I was able to use readAsDataURL to get the file contents themselves, which isn't as elegant as a file:// url but I'll settle for that. Would you mind writing it up as an answer so I can award the bounty? – Ben Taitelbaum Commented Apr 11, 2014 at 6:01

2 Answers 2

Not sure I understand it well, but if I do, you won't be able to have a file path (meaning the dropped file fullpath).
It's a "protection" from browsers. But you can at least get the name of it.

var file   = e.originalEvent.dataTransfer.files[0],
    reader = new FileReader();

reader.onloadend = function (event) {
    console.log(file);
    // filename is in file.name
    // ... do something here
}

reader.readAsArrayBuffer(file);

Here is a jsFiddle of how to do it: jsFiddle demo

A file (when you use console.log(file) to log dropped file) in chrome is like:

{
  name: "a.txt", // file name
  size: 2473, // 2kb
  type: "text/plain", // file type
  lastModified: 1613374662130, // lastModifed
  lastModifiedDate: ..., // lastModifed Date
  arrayBuffer: ... // Buffer for reading the content
}

But you don't have access to the path or fullPath of it (for security reasons).

Also you can read its content by FileReaderApi.