Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

New file browser for app developers

edited January 2013 in Apps

I've been running into the need for a file browser for particular apps lately, not just in the wysiwyg editor, so I extended the admin/util/modal handler that provides the $.open_dialog() and $.close_dialog() wrappers around the jQuery SimpleModal plugin. The result is a new handler filemanager/util/browser that initializes a $.filebrowser() method that opens a file browser dialog.

Here's a quick example of a complete view template that implements a thumbnail browser (note: the callback is optional since the set_value option is sufficient here, but I wanted to show both options):

{! filemanager/util/browser !}

<input type="text" id="file" size="30" />
<input type="submit" id="browse" value="Browse" />

<script>
$(function () {
    $('#browse').click (function () {
        $.filebrowser ({
            allowed: ['jpg', 'jpeg', 'gif', 'png'],
            callback: function (file) {
                console.log (file);
            },
            set_value: '#file',
            title: '{"Choose an image"}',
            thumbs: true
        });
    });
});
</script>

Still on the to-do list is upload support from within the dialog :)

Comments

  • Drag and drop multi-file uploads are now supported through the filemanager/util/browser file dialog, thanks to jquery-filedrop. Tested in Chrome, Firefox and Safari so far (IE won't do the drag & drop, but I'll be testing that the form-based upload will work instead).

Sign In or Register to comment.