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”:
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!
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_widthhas got me covered 99% of the time.Thanks for your comment!
We had a similar thought and used the new Uploader for powering our very own gallery-plugin. It’s not a public plugin though, but here’s a glympse at how it looks:
http://dl.dropbox.com/u/3556910/posttypegallery.jpg
Mind sharing how it was accomplished.
Thanks!
The plugin creates a custom-post-type named gallery, a meta_box is added and then media_upload_form() delivers the uploader. the rest ist basically some css and jquery-stuff making uploading look pretty, bind the uploads to the very post and makes them sortable…
Christian, that’s nice, I got the drag and drop working in a meta box right next to the visual editor too, or anywhere around it but that’s not what users would generally expect after using word processing software. Google Docs can handle it pretty well though! Thanks for the heads up!
Got your point, just wanted to share our idea. Drag’n’Drop handled in the editor would be absolutely great, everyone of our clients would love this…
Ah cool, well if you guys have some free time you could try and draft something to at least
alert()when a file is being dropped onto TinyMCE, clearly you have more experience with Plupload than I do, maybe it’ll be a piece of cake :) Thanks!We just used basic wordpress functions and didn’t interfere with plupload itself. So, sorry, i guess we can’t help you here.
No worries, I think I’m getting closer to the solution.
Great, keep us updated ;-)
Did you actually got to limit each one of those boxes to 1 image? or you can drop N images in one upload box? How did you resolved that?
Thanks!
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 :)
Dzikiri, seems like the bug is not being caused by the editor. See update to post, oh boy I’m excited! :)
…waiting for updates #2 and #3 :D
Konstantin, I’ll give you a dollar if you can implement drag and drop to the featured image box, with a drop automatically setting that image as the featured.
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!
For those of you subscribed to comments… I got an update! You’re gonna love the video!
HOT! This is awesome, Konstantin! I really hope this gets accepted into core, it’s going to change the way people use WordPress!
Thanks for your support Erik!
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
Doug, cool! Well you can get me a beer for what I’ve done in the video ;) It’s nowhere near a working solution but it’s a start, right?
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.
Looks good!!!!
Thanks Shawn! I appreciate the support :)
I like the idea and see it being quite a good one from an end-user perspective.
Thanks Ed, your feedback’s important!
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!
Thanks Joachim, glad somebody’s thinking alike :)
Very nice, great idea!
Thanks Emil, I appreciate your feedback!
Really nice!
This got me thinking that making this work for the featured image should be fairly easy. I’ll try when I get a bit of time and see!
Seriously, that would be awesome.
Daniel, you’re right! Come back and let us know where you end up with it :)
http://screencast.com/t/4wRoAKg8a
Damn this was fun!
The code is a mess, it needs lots of cleaning. And it needs a lot of work yet, ie:
* When you remove the thumbnail it needs to show you the uploader again
* It needs to limit the upload to 1 file (you could upload all you want now)
* It’s not showing the “uploading..” animation…
Here it is: https://bitbucket.org/MZAWeb/featured-dragndrop
Fork, play, patch
Updated: https://bitbucket.org/MZAWeb/featured-dragndrop/src/bc0ac75e71bb/featured-dragndrop.php
It’d be great if someone wants to test it
Daniel, seems to work for me. Have you created a trac ticket for this yet?
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 :)
Great idea, we’ve been using the ‘Faster Image Insert’ plugin which is a close idea and works very well.
Thanks Jean :)
Looks awesome and really steps up the image up loader even after the recent large strides we have just got. Great work!
Thanks Andy, let’s see if I can keep pushing this to core :)
Voted this idea on WordPress Ideas.
Looking forward to the release of the plugin you are working on, I would love to see how it works with TinyMCE.
Thank you Noumann, we have quite some votes there. Let’s see what happens to the Trac ticket :)
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!