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

Improve this question
5
  • Why do you want to populate an input type=file ? Commented Sep 13, 2011 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. Commented Sep 13, 2011 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. Commented Sep 13, 2011 at 22:27
  • I found this other stack post but only compatible in chrome and safari : stackoverflow.com/questions/2657653/… Commented Sep 13, 2011 at 22:30
  • From that link FormData() looks interesting. Does anyone here have any experience with it--particularly regarding file uploads? Commented Sep 14, 2011 at 20:44

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This was an excellent suggestion but I used a jQuery plugin in the end. I will post which one when I can find out.
I went with Aquaron Dropup (aquaron.com/jquery/dropup) but it is quite buggy and I might change it now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.