Butterfish
by Butterfish

Drag and drop files from your desktop to your browser

Posted in Javascript, Swell

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 < 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:

ddimagesAnd the video:

Tags: , , , ,

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

  1. 1
    Cedric Dugas Says:

    Thats crazy, I want this stuff

  2. 2
    Swell JS part 3, desktop to browser demo « Position Absolute Says:

    [...] just added a little demo of their drag and drop prototype. it work with Safari4 and Chrome2, I suppose this have something [...]

  3. 3
    Twitted by julius_eckert Says:

    [...] This post was Twitted by julius_eckert [...]

  4. 4
    Drag and drop files from your desktop to your browser « SwellJS … Says:

    [...] 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. 5
    Drag and Drop between Web Browser and Desktop Says:

    [...] 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. 6
    Ralph Bolliger Says:

    That’s just amazing stuff! I’m so stunned! Wow! Go ahead guys! It will change the web 2.0 for sure!

  7. 7
    Stuart Clark Says:

    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. 8
    Amit Says:

    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. 9
    SleepyCod Says:

    @Amit:

    Unfortunately this is not possible at the time, you can’t bypass the file download dialog, at least on Windows.

  10. 10
    Stuart Clark Says:

    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. 11
    Butterfish Says:

    @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. 12
    Thomas Link Says:

    Simply nice – get rid of the could improve usability (if more users get used to drag-n-drop)

  13. 13
    luca becchetti Says:

    hi, do you think to make this example opensource?

  14. 14
    Partial Recall » Links for 2009-07-30 Says:

    [...] 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. 15
    Butterfish Says:

    @luca
    This example is BSD-licensed.

  16. 16
    Chris Says:

    Is there a chance this will work with Firefox in the near future? That would increase use substantially.

  17. 17
    Butterfish Says:

    We still don’t know much about FF 3.6+ and its planned features, but it should be implemented… for 2010.

  18. 18
    Chris G Says:

    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. 19
    Butterfish Says:

    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. 20
    Ryan Says:

    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. 21
    Butterfish Says:

    Thanks for your input! So FF 3.6 did implement the dataTransfer files property, great news :D

  22. 22
    SleepyCod Says:

    Another item in the @todo list, dammit!

  23. 23
    Hitesh Panchal Says:

    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. 24
    Butterfish Says:

    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.

Leave a Reply