0

I have found loads of jQuery plugins to allow a user to drag and drop a file onto a "dropzone" and add the file to an upload queue or immediately upload it.

However, I would like to allow my users to drag an image onto a dropzone and have that populate an <input type="file">.

Does this exist already? If not, how would I go about creating it?

Many thanks,

Andy

atwright147
  • 3,694
  • 4
  • 31
  • 57
  • Why do you want to populate an input type=file ? – Awea Sep 13 '11 at 21:58
  • The plan was to make adding an image to a product in a shop easier (just drag and drop the file onto the big box--job done). However, I cannot just upload it when the user is adding a new product as I do not know what ID to save it under (the DB will auto-increment this on INSERT). Therefore, I wanted to populate the file input, so that, when the user clicks Submit it will all go up as normal. – atwright147 Sep 13 '11 at 22:08
  • It is for a CMS, for my own company (so, I can ensure that they only use compatible browsers (FF4+ or Chrome). Having done some more research I have discovered that browser security is getting in my way. I have managed to get it to work for a text input, but get security warning for a file input :(. If anyone has a solution let me know, if not I will go back to using normal, boring file inputs. – atwright147 Sep 13 '11 at 22:27
  • I found this other stack post but only compatible in chrome and safari : http://stackoverflow.com/questions/2657653/drag-and-drop-file-upload-in-google-chrome-chromium-and-safari – Awea Sep 13 '11 at 22:30
  • From that link FormData() looks interesting. Does anyone here have any experience with it--particularly regarding file uploads? – atwright147 Sep 14 '11 at 20:44

1 Answers1

2

HTML5 drag and drop file field

Here is what ended up working, I set the vanilla upload field to opacity : 0 and positioned it under the mouse when the mouse is over the visible dropZone div, via the 'dragover' event.

'dragover' overcomes the problem with the browser window being out of focus, and provides .pageX and .pageY which I then bound to the invisible file field's .top and .left.

Community
  • 1
  • 1
Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • This was an excellent suggestion but I used a jQuery plugin in the end. I will post which one when I can find out. – atwright147 Jan 16 '13 at 15:29
  • I went with Aquaron Dropup (http://aquaron.com/jquery/dropup) but it is quite buggy and I might change it now. – atwright147 Jan 28 '13 at 21:07