5

I'm trying to make a drag and drop uploader in HTML5 with the added requirement of being able to do so with files dragged from other websites I don't own and can't edit (mostly images).

In this case, on the ondrop event, instead of downloading the image from the local computer using e.dataTransfer.files and posting it, I retrieve the URL with e.dataTransfer.getData('URL') and post it to the server for it to download server-side.

Works fines, except when I drag an image enclosed in a link.

It works when initiating drag from an <img> element, but not with an <img> enclosed in <a> element. In the latter one, e.dataTransfer.getData('URL') gives me the href of the link, not the src of the image.

I looked into e.dataTransfer.getData() to see if it accepted other arguments that could help. The other alternative was "Text", and it brought up the same results as "URL".

Is there a way to get the image URL or am I doomed because the browser doesn't actualy carry the image URL when dragging an image enclosed in a link (ie : I'm dragging the link, not the image)?

UPDATE

To illustrate I created a jsfiddle here : https://jsfiddle.net/2m58rfou/
And another one with 2 images to demonstrate my problem here : https://jsfiddle.net/870asboa/
Open them in separate tabs and try dragging both images in the drop zone.

With the first image, I get what I want : https://www.gstatic.com/webp/gallery/1.sm.jpg
With the second one I get http://www.google.com/, the link the image is enclosed in, rather than the image address.

In the second scenario, is there a way to get the image address and not the link in the ondrop listenner, or is it impossible ? (remember that the images can be on any website, I can't catch any dragstart event, basically only the drop one).

noodlesup
  • 53
  • 6

1 Answers1

2

At dragover event handler, iterating event.dataTransfer.types

The DataTransfer.types read-only property is an array of the drag data formats (as strings) that were set in the dragstart event. The order of the formats is the same order as the data included in the drag operation.

the array contains three types:

  • text/plain
  • text/uri-list
  • text/html

text/html is the html string of the dragged <img> element.

Get the string using by passing "text/html" to .getData(), then either extract src of html string using RegExp or create an element and append the html string to the element, then get src of <img> element using .src.

holder.ondrop = function (e) {
  e.preventDefault();       
  this.className = '';
  var img = e.dataTransfer.getData("text/html");
  var div = document.createElement("div");
  div.innerHTML = img;
  var src = div.firstChild.src;
  console.log(div.firstChild, src);
  results.innerText = src;
}

jsfiddle https://jsfiddle.net/2m58rfou/6/

guest271314
  • 1
  • 15
  • 104
  • 177
  • Thanks for the quick answer. But this only works for pages I own. – noodlesup Dec 29 '16 at 23:26
  • @noodlesup Not certain what you mean? Open a separate tab, load a new jsfiddle editor including `` element. Drag image from jsfiddle link at Answer and drop dragged image at ` – guest271314 Dec 29 '16 at 23:26
  • This only works on pages where I can run this script, pages I own and can edit. How can I get this behavior from external websites ? – noodlesup Dec 29 '16 at 23:30
  • You can get the `src` of all images within `document` at `console` using `document.images`. – guest271314 Dec 29 '16 at 23:36
  • I don't think you understand what I'm saying. I can't use ondragstart because the drag starts from another website in another tab. – noodlesup Dec 29 '16 at 23:40
  • If you are not the owner of the `document` you can use `console` at the tab to retrieve the `src` of all images. You could also probably set `dragstart` event to all images on page at `console`. Else, get all `img` element `src` using `document.images`. See [List file sizes of all images on a page (Chrome Extension)](http://stackoverflow.com/questions/41085017/list-file-sizes-of-all-images-on-a-page-chrome-extension) – guest271314 Dec 29 '16 at 23:42
  • @noodlesup You could also right-click on the image and select `Copy image address`, then paste the `` `src` at another tab. – guest271314 Dec 30 '16 at 00:13
  • Sure, or I could download the image and then upload it. The point is doing it with a drag and drop from another website. – noodlesup Dec 30 '16 at 00:41
  • @noodlesup If you are not the owner of the `document`, how is this to be achieved? Have you tried attaching `dragstart` event and handler at Answer to `` elements at `console`? – guest271314 Dec 30 '16 at 00:44
  • @noodlesup _"How can I get this behavior from external websites ?"_ Have you considered including that you are trying to achieve requirement at `document` which you do not control `javascript` at Question? – guest271314 Dec 30 '16 at 01:19
  • You're right I didn't make it clear. I updated the question and also added a jsfiddle. – noodlesup Dec 30 '16 at 15:41
  • @noodlesup Re-read update, you did include some details concerning the site where you want to drag the image from. Though is using `console` or approach other than drag and drop possibility? – guest271314 Dec 30 '16 at 15:47
  • Not sure if this is possible using drag and drop alone without being able to modify which element is being dragged or explicitly setting the data to be transferred. Workarounds could be possible. One workaround is to right-click the image, select `Open image in a new tab`, then drag the image to the drop area. Will update Answer with that approach. – guest271314 Dec 30 '16 at 16:06
  • Yes the `Open image in a new tab` is the simplest workaround. I was wondering if I could get past these extra clicks. – noodlesup Dec 30 '16 at 16:20
  • Not sure how you would go about that? Why make the process more complicated? – guest271314 Dec 30 '16 at 16:29
  • It's actually making the process simpler for the final user. – noodlesup Dec 30 '16 at 20:12
  • @noodlesup Another option is using copy/paste. Select `Copy image address` at first page, then paste the URL at element at second page. You can use `paste` event to catch the paste of image URL.See updated post. – guest271314 Dec 30 '16 at 22:11
  • 1
    I didn't kow about the `text/html` argument. `e.dataTransfer.getData("text/html")` absolutely works, thank you ! – noodlesup Jan 02 '17 at 22:34