Drag and drop files from your desktop to your browser « SwellJS

by Butterfish

28 Jul 09

Drag and drop files from your desktop to your browser

Since the last post, we’ve received a huge number of requests and questions about drag&dropping files onto your beloved browser.

The mechanism behind is quite simple: the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).

By now, two browsers are playing well with the demo (Safari 4, Chrome 2+) while others degrades gracefully.

Here’s the code :

Swell.Core.Event.add('upload', 'change', function() {
    $('loader').show();
    $('foorm').xhr(function() {
        var currentEl = $('upload').current();
        $('filelist').show();
        for (var i = 0, len = currentEl.files.length; i &lt; len; i++) {
            $('filelist').appendHTML(currentEl.files.item(i).fileName + '
');
        }
        var imgs = this.responseText.split('|');
        new Swell.Core.Asset().load('img', imgs, function(img) {
            $('loader').hide();
            $(img).appendTo('image-container');
        });
    });
});

The demo:

And the video:

Tags: desktop to browser drag & drop, drag&drop, Javascript, playground, showcase

This entry was posted on Tuesday, July 28th, 2009 at 3:45 pm and is filed under Javascript, Swell. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

24 Responses to “Drag and drop files from your desktop to your browser”

1
Cedric Dugas Says:
July 28th, 2009 at 5:33 pm
Thats crazy, I want this stuff
2
Swell JS part 3, desktop to browser demo « Position Absolute Says:
July 28th, 2009 at 5:44 pm
[...] just added a little demo of their drag and drop prototype. it work with Safari4 and Chrome2, I suppose this have something [...]
3
Twitted by julius_eckert Says:
July 28th, 2009 at 8:06 pm
[...] This post was Twitted by julius_eckert [...]
4
Drag and drop files from your desktop to your browser « SwellJS … Says:
July 28th, 2009 at 8:07 pm
[...] post: Drag and drop files from your desktop to your browser « SwellJS … Filed under Uncategorized « Phoenix 1.0 [pes2009][xbox 360] – GU1337 New to retail [...]
5
Drag and Drop between Web Browser and Desktop Says:
July 28th, 2009 at 8:28 pm
[...] Swell to be able to drag and drop between Web and desktop Also there is a demo on their web page: Drag and drop files from your desktop to your browser. They say “two browsers are playing well with the demo (Safari 4, Chrome 2+) while others [...]
6
Ralph Bolliger Says:
July 28th, 2009 at 11:02 pm
That’s just amazing stuff! I’m so stunned! Wow! Go ahead guys! It will change the web 2.0 for sure!
7
Stuart Clark Says:
July 29th, 2009 at 2:59 am
Congratulations guys,

This is an amazing step forward and has great potential, for instance, I’m so impressed with it that I have already used it to create a proof of concept Drupal module.

Can’t wait to see what you do next.
8
Amit Says:
July 29th, 2009 at 1:36 pm
Any ideas, of doing it the other way round if at all. Drag-Dropping a file hyperlink on desktop from a web page. So that we get the file without the download dialogue. Same as on Macs as we see today ?
9
SleepyCod Says:
July 29th, 2009 at 4:02 pm
@Amit:

Unfortunately this is not possible at the time, you can’t bypass the file download dialog, at least on Windows.
10
Stuart Clark Says:
July 30th, 2009 at 11:38 pm
Hi Guys,

Just discovered that you can get somewhat Firefox support for this, however it requires a 3rd party Firefox add-in. The add-in can be found at http://www.teslacore.it/wiki/index.php?title=DragDropUpload.

Also, I have put together a brief video showing off the Drupal module that I put together. Available at http://www.deciphered.net/blog/2009/07/29/drupal_drag_and_drop_file_upload_demo.

I would be more than happy to share the code with you to show you how I achieved what I did.

Cheers,
Stuart Clark
11
Butterfish Says:
July 31st, 2009 at 8:39 am
@Stuart:

We’ve already heard about the Firefox add-in, but we wanted to stick to browser standards without using any third-party extension.

Congratulations for the plugin you’ve done, we’re more than happy to see real-life usages of Swell’s DD!

As we are preparing a public website with Swell’s documentation, implementations focuses and API docs, we thought that it would be nice to have a nice explanation on how you’ve integrated SwellJS into your project as well as having an overview of goodsides and downsides.

Great work!
12
Thomas Link Says:
July 31st, 2009 at 10:43 am
Simply nice – get rid of the could improve usability (if more users get used to drag-n-drop)
13
luca becchetti Says:
August 1st, 2009 at 1:14 pm
hi, do you think to make this example opensource?
14
Partial Recall » Links for 2009-07-30 Says:
August 1st, 2009 at 5:24 pm
[...] Drag and drop files from your desktop to your browser [SwellJS - Jul 28, 2009] – The mechanism behind is quite simple: the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course) [...]
15
Butterfish Says:
August 1st, 2009 at 10:53 pm
@luca
This example is BSD-licensed.
16
Chris Says:
August 5th, 2009 at 2:20 am
Is there a chance this will work with Firefox in the near future? That would increase use substantially.
17
Butterfish Says:
August 5th, 2009 at 9:54 am
We still don’t know much about FF 3.6+ and its planned features, but it should be implemented… for 2010.
18
Chris G Says:
August 26th, 2009 at 5:02 am
Great work man, I had to do this using java applets and its super slow and makes the browser crash some times.

I’ve seen on the net one guy has done this using a firefox only implementation, so if you could use it then it’s only IE left!

http://cultivatewebdesign.com.au/blog/cross-browser-drag-and-drop-file-upload/
19
Butterfish Says:
August 26th, 2009 at 3:32 pm
We won’t be using any thirdparty script for the cross-browser implementation, btw this ticket shows us that the next FF version may support DnD file upload!
20
Ryan Says:
September 1st, 2009 at 3:36 am
You guys might be interested in this http://www.thecssninja.com/javascript/drag-and-drop-upload it demonstrates drag’n drop file uploading in Firefox 3.6 without the need for a file input.
21
Butterfish Says:
September 1st, 2009 at 9:41 am
Thanks for your input! So FF 3.6 did implement the dataTransfer files property, great news
22
SleepyCod Says:
September 1st, 2009 at 9:43 am
Another item in the @todo list, dammit!
23
Hitesh Panchal Says:
October 1st, 2009 at 6:32 pm
Hi Swell ! you are such a big fish in sea. Great !!!

i have one question on Desktop to Web functionality.

can you Drag N Drop Word, any voice file or Text File from “Desktop” to “Web” ??

if Yes so please give me link to download !!!

Such a nice Work !!

Regards,
Hitesh Panchal
24
Butterfish Says:
October 5th, 2009 at 12:10 pm
You can practically drag and drop anything from the desktop with the method exposed on this example. For now we are still lacking documentation so I would recommend that you wait for the main website to be done before using it.