SwellJS - another big fish in the sea » showcase

Drag and drop files from your desktop to your browser

Tue, 28 Jul 2009 14:45:00 +0000

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:

Swell Widget example: ImageZoom

Mon, 11 May 2009 22:16:46 +0000

As Beta release is around the corner, we are glad today to provide the first swell widget. This widgets makes intensive use of Core components and shows how much power you have at your fingertips…

This is a widget that ecommerce companies often look for, which enables to zoom on an image and view much more details than on a thumbnail, without having to display the entire image; providing better user experience.

Trigger image loading with Javascript and Swell

admin — Thu, 07 May 2009 14:47:11 +0000

As we are seeing growing interest for Swell, we now want to show how to use it and how cool it is , this is according to the milestones on our Trac a necessity and this will as well open up the project to a larger public.

One of the Core component (Lazy loader) plays well with another (Element) in this example.

Enjoy!