Is there a way of drag-n-drop upload an image from a url?

[homanchou]

dragging an image file from my file system already works. But dragging an image from another webpage doesn't work. Is there any plan to support this in the future?

[xingzheone]

作者好像不在了. 悲惨那

[homanchou]

That might be true that it's browser dependent. I only ask because I
thought it was a feature that blueimp jquery file upload supported, but
maybe it only worked on chrome and firefox and not safari? (I could be
wrong). Either way it would be very convenient if the js could be smart
enough to detect the url string being dropped and attempt to read the image
file contents from there.

On Tue, Dec 17, 2013 at 4:35 PM, danialfarid [email protected]:

That's browser dependent and I don't believe HTML5 supports that.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/79#issuecomment-30806235
.

[danialfarid]

I will work on it once I get time. Feel free to submit a pull request.

[homanchou]

Here is a reference link I found FYI:
https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

On Thu, Dec 19, 2013 at 7:27 PM, danialfarid [email protected]:

I will work on it once I get time. Feel free to submit a pull request.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/79#issuecomment-30986616
.

[danialfarid]

This feature won't be that useful since you can only read images from the same origin no another website and since you already have those images on your server, there shouldn't be that much need to upload it back to the server.

Do you have any scenario that this feature could be helpful?

[homanchou]

This feature would only be useful if we can drag an image from another
website onto the file upload input, so that we don't have to download the
image to our local file system first. It won't be useful to drag and drop
from the same origin. What if instead of using javascript to attempt to
read the image data from a different origin, we at least prevent the
default behavior of browser changing address to that image, and instead
provide some way of attaching a custom callback? For example, if using
rails backend, a callback could pass the image url string to rails, allow
it to fetch the image data then create a file attachment that way and pass
the thumbnail image data back to the front-end?

On Fri, Dec 20, 2013 at 9:06 AM, danialfarid [email protected]:

This feature won't be that useful since you can only read images from the
same origin no another website and since you already have those images on
your server, there shouldn't be that much need to upload it back to the
server.

Do you have any scenario that this feature could be helpful?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/79#issuecomment-31024732
.

[danialfarid]

You can achieve this with the current version like this:

<div ng-file-drop="onFileSelect($files, $event)">drop files here</div>

$scope.onFileSelect = function($files, $event) {
  if ($files.length == 0) {
    var link = $event.dataTransfer.getData('text/html');
    if (link.length > 0) {
      var url = angular.element(link).src;
      if (url) {
        //send the url of the image to the server to be downloaded on the server side
        $http.post('server/urlFetch', {urlToBeDownloaded: url});
      }
    }
  } else {
    //upload file
  }
}

This way you can download the dropped image on the server side from the src url.

[xpepermint]

+1

[faisalferoz]

+1

[abodacs]

+1

[danialfarid]

Feature implemented since version 9.0.3.