making drag and drop upload with less javascript

Question

I'm trying to make an upload holder for my website, so users can easily drag and drop a file on it.

there is a lot of libraries and events for doing that, but I need a simple way.

this (thought) came to my mind...

I put a file input to the page and sets width and height.

now when my user drag a file on it, onchange event will work.

but I want to hide browse button and there is two way:

set 0 opacity.(it is not working in some browsers)

set hidden visibility.(the thought is not working)

help me, what else I can try?

I would suggest shadow DOM, but that's hardly a working draft. — Mooseman
– Mooseman, Commented Jan 17, 2013 at 23:04

Jimmy Breck-McKye · Accepted Answer · 2013-01-17 23:07:06Z

1

Put the form on a hidden iframe. Use an ordinary div for the target. When the file is dropped, catch the event and update the input, then submit as post. The result is ajax-like uploading via file drag and drop.

answered Jan 17, 2013 at 23:07

Jimmy Breck-McKye

3,0641 gold badge24 silver badges33 bronze badges

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

1 Comment

Licson Over a year ago

Or you can use the FileReader to read the file when dropped and upload it with the new XMLHTTPRequest level 2 standard.

Collectives™ on Stack Overflow

making drag and drop upload with less javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related