Dear WordPress, I Want to "Drop Files Here" in the Visual Editor!

Wouldn’t in be great if we could drag and drop to upload files directly into the visual editor? WordPress 3.3 very well handles drag and drop uploads into the Add Media modal box, in a special area that says “drop files here”:

WordPress 3.3 Drop Files Here

And thank you so much for that, WordPress, but I’m tired of constantly having to open the media manager to insert an image into my post or page. Having the visual editor carry out the “drop files here” role would be awesome, it would save at least one click every time I need to insert an image.

Two clicks if we can get it to upload and insert the image into the editor without even showing the Add Media screen! But that might be a little more complicated because of positioning and sizing. A simple upload is where we should start.

So I went digging around Plupload last night — the library that powers the upload features of WordPress since 3.3. I spent almost two hours poking the tool around and I could get it to handle drag and drog events literally anywhere in the admin screen, except the freaking TinyMCE editor, because of the stupid iframe! Can you believe that!

I’m not loosing hope though, I’m quite sure that I (or somebody else) will come up with a solution. At least I can get to drop files in the HTML editor textarea ;) Thoughts?

P.S. An “idea” has been submitted to WordPress.org pool, I appreciate the votes there if you own a dot-org account. Thanks!

Update: Thanks to my brother @SoulSeekah we’ve been able to figure out that the TinyMCE editor is not loaded at the time I added the drop event listener. Okay now this is exciting, let’s see where we can take this!

Update: Proof of Concept

Ready? Are you sure? Great!

Sorry for the background noise, and low quality sound. In this video I’m demonstrating my first experiment, currently as a plugin. I’m not ready to share the plugin yet since it needs a little bit more work, and besides, I had to make changes to the plupload file shipping with 3.3.1 core.

As soon as I have something I’ll open a core trac ticket to see where we can take this. Thank you all for your support.. And ugh.. What do you think?

Update: Trac ticket created if you’d like to follow along. Thanks for the support everyone, it really means a lot to me!

About the author

Konstantin Kovshenin

WordPress Core Contributor, ex-Automattician, public speaker and consultant, enjoying life in Moscow. I blog about tech, WordPress and DevOps.

46 comments