How do I get the URL for a dropped image using a Chrome userscript?
Solution 1
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
Solution 2
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.
Ben Taitelbaum
describe "Ben" do before(:each) do @ben = Factory.create(:ben) end it "has a passion for technology" do @ben.passions.should include(:programming) @ben.favorite_wastes_of_time.should include(:reddit) @ben.company.name.should be 'coshx' end end
Updated on June 03, 2022Comments
-
Ben Taitelbaum almost 2 years
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 fore.dataTransfer.getData("text")
ande.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);
-
Dion about 4 yearswhy does the code work on jsfiddle and not on my computer? I tried the code from jsfiddle on my computer but images dropped onto the box just open in full screen with no image name