fsUtils - jQuery plugin

Monday, July 4, 2011 Posted by Ruslan Matveev
Hi, it's a time to announce that fsUtils flash wrapper now available as a jQuery plugin, now it's simple and crossbrowser solution that allows you to upload and download files from local file system using any webbrowser and Adobe Flash.
Today's demo will show you how to build a simple programming text editor based on it. I'm going to use ACE - standalone code editor written in JavaScript.

Ace is a standalone code editor written in JavaScript. Our goal is to create a web based code editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page and JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.

Important note: Do not use Internet Explorer! I mean don't use it to see this demo, and don't use it at all. The reason why it's not working, is not fsUtils flash wrapper but Ace code editor, which is not suppose to work in it.



Click around to understand how that works, but the idea is really simple, I use fsUtils flash wrapper to allow the user to load and save files into (and from) the code editor area, add couple of buttons to run the actual code, and you'll get your own simple IDE for the JavaScript development. So what do you think?

A couple of words about the actual jQuery plugin. It's very easy to use, all you need is include jquery.fsutils into your page, and turn any element into the button that can load or save the files:

// show open file dialog when user clicks it
$('.openFileDialog').openFileDialog(function(data, fname) {
        // data - will contain base64 encoded file contents
        // and the fname is the actual filename
        alert([fname, data]);
}, [
        // .js and .txt files only this time
        '*.js', '*.txt'
]);
// same goes for the save file dialog
$('.saveFileDialog').saveFileDialog(function() {
        // simply return file contents and it's name
        return {
                'data': btoa('HELLO'),
                'filename': fileName
        };
});


Links:

Post a Comment