desktop to browser drag & drop « SwellJS – another big fish in the sea

Posts Tagged ‘desktop to browser drag & drop’

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:

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

by SleepyCod

17 Jul 09

Bridging desktop and browser with Swell’s native Drag and Drop implementation

Posted in DD, Swell

Today is a big step forward for us, we are proud to feature the first showcase of our Drag&Drop implementation.

This is not what you may think about, you may think about drag & drop as being stuck inside your browser window but today what we’re going to show is a new way of conceiving drag & drop applications. The one you have always waiting for, imagine interacting with the browser chrome and your OS…

In the video, we are providing a simple yet powerful application to import a RSS feed in your webpage. The classical way is to type in the feed URL and then getting redirected to it, which commonly takes 3 to 5 steps. With this implementation you just have to drop the rss icon onto an appropriate target and that’s all folks!

We use YQL and JSONP to transform RSS into JSON and of course a Swell Element to dynamically attach the behavior to the webpage.

Here’s the Javascript code to handle this.

var dd2 = new Swell.Lib.DD.Droppable('moo');
 
dd2.ondrop = function(e) {
    var file = this.getData(e, 'DD_URL').split("\n")[0];
    if (/^http\:\/\//i.test(file) !== true) {
        return false;
    }
    $('debug').setHTML('loading…');
    e.target.className = '';
 
    var yqlRequest = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url=%22'+file+'%22&amp;format=json&amp;callback=moo';
    html.script({
        'type' : 'text/javascript',
        'src'  : yqlRequest
    }).appendTo(document.getElementsByTagName('head')[0]);
}