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!

46 thoughts on “Dear WordPress, I Want to "Drop Files Here" in the Visual Editor!

  1. Great idea.

    I’m not sure how it works in HTML5 / JavaScript but in AS3 event triggers and listeners would handle the drag and dropping and pass it to the script for uploading and storing to the database. But how do you propose to handle image re-sizing, cropping, scaling etc, inside the editor?

    • Shawn, I’m not an HTML5 drag and drop pro myself, but since WordPress 3.3 uses Plupload that handles drag and drop I went with that. I got to a point where I could drop files anywhere on the post edit screen (except TinyMCE iframe) and get it to say “you dropped a file called foo.png”, however I’m not really interested in the upload process itself if Plupload can’t catch a drop event inside the visual editor iframe, so I didn’t go that route yet.

      As for cropping and resizing, it does’t really matter at this stage. Besides, I rarely use those features anyway because $content_width has got me covered 99% of the time.

      Thanks for your comment!

  2. Nice idea!

    For a temporary workaround, why not completely replace tinyMCE with another editor and mimic the default buttons? :) As for the resizing/thumbnails creation, I’m sure it can be handled easily with wpajax.

    I think I’m gonna try this myself when I have the time. But please do post an update when you have a working plugin :)

    • Erik, a dollar? That would keep my site running for like half a day, but me — I have a family to feed :) But the idea’s good, if we can get the visual editor working, the featured image box shouldn’t be a problem at all.

      Thanks for your comment!

  3. Three awesome ideas in this post/comments stream. I would gladly donate toward the development of any/all three:

    Drag and drop featured image box
    Drag and drop in visual editor (defaults to $content_width?)
    Drag and drop gallery custom post type

    • Hey Doug, thanks for the kind words. We’re not planning to release this as a public plugin – but if anyone else does, we’d gladly share our work. Just give me a sign.

  4. Funny coincidence, I was just thinking about how cool something like that would just a few days ago, and here you are describing and toying with just that same idea!

    Glad to see that you’re pretty close to getting it fully implemented, that’s awesome! Let’s hope this makes it to core for an upcoming release!

  5. This is a great idea, although I’m not sure how plausible it is, especially with TinyMCE and all its own issues let alone adding something like this.

    Have you looked at the “Faster Image Insert” plugin in the repo? It pulls the dropzone/media tabs into a metabox on the post editor. Saves me a step at least.

    • Hey Drew, thanks for stopping by! Yeah I’v seen that and other plugins that simplify the process, but if 3.3 allows uploading media by dragging and dropping files from your OS, it might as well allow it into TinyMCE. Have you seen the plugin/patch I attached in the Trac ticket? If you have time you can try it out, it’s fun :)

      Thanks for you comment :)

  6. Konstantin,

    Great work and nice video to boot! WordPress had so many image options before, most of them not being actively used by a large portion of users. The HTML 5 drag and drop feature plus removing the unused icons was certainly a step in the right direction and you’re right on track with reducing the number of steps to upload an image. Find what users do the most and streamline that process.

    Nice to see there’s a Trac ticket as well. Great work!

Comments are closed.