Use existing HTML element/remove file into drag and drop file upload?

Question

I'm trying to find a way by which a remote file, represented by an HTML element on the page, can be dragged to a drag-and-drop file upload box. The default functionality of a drag-and-drop file upload is to accept input from outside the browser using the browse dialog or dragging the file inside the area, but I'm not certain if there's an implementation that allows input from an element representing a file inside the browser page.

I'm using plupload but if another plugin supports that feature, I'd love to hear about it. Edited to add: insight as to whether plupload can support this or not would be very helpful, as it is part of the specification for the project. Not very knowledgeable in JS here. I hope this description comes across clearly, been trying to search for this but nothing seems to turn up. :)

Answer 1

https://github.com/blueimp/jQuery-File-Upload/wiki

In addition to drag/drop/browse it will allow you to add files "manually" to the upload queue (so you can set attribute data-file in some html element then access those & add them to the queue) but you'll need to get your hands dirty with javascript, it's great plugin but indeed require some JS fluency to have it do what you want it to do

NB: imo start by not using the ui/template system it offers with it, start with the basics : https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

From the API page :

Blockquote

Programmatic file upload

Usually, file uploads are invoked by selecting files via file input button or by dropping files on the drop zone.

However it is also possible to upload files programmatically for browsers with support for XHR file uploads (see Browser support):

  $('#fileupload').fileupload('add', {files: filesList});

The second argument must be an object with an array (or array-like list) of File or Blob objects as files property. Other properties allow to override options for the file upload, eg the upload url:

  $('#fileupload').fileupload('add', {files: filesList, url: '/path/to/upload/handler.json'});

more : https://github.com/blueimp/jQuery-File-Upload/wiki/API