DirigoEdge
Derek Wheelden
by Derek Wheelden
share this
?fl
« Back to the Blog

Adding the File Browser to an Insert Image Dialog

05/05/2014
Adding the File Browser to an Insert Image Dialog

The file browser allows users to choose images that have been uploaded via the DirigoEdge Manage Media section of Edge, as well as upload new files to existing directories.  We've made some big changes to this feature.  Here's the technical lowdown. The file browser will fire a callback method containing an object with all of the properties of the chose image.

File Dependencies

There are a few files required for using the file browser

  • filebrowser.js
  • file-browser.css
  • dropzone/dropzone.js
  • dropzone/css/dropzone.css
  • dropzone/css/basic.css

filebrowser.js and file-browser.css are included in the admin styles and scripts by default. To add dropzone you will need to include the following in @section Scripts :

<script src="/Scripts/jquery/plugins/dropzone/dropzone.js"></script>
<link href="/Scripts/jquery/plugins/dropzone/css/dropzone.css" type="text/css" rel="stylesheet">
<link href="/Scripts/jquery/plugins/dropzone/css/basic.css" type="text/css" rel="stylesheet">

Modal

Next you will need a modal. The file browser plugin will generate most of the HTML for you, so you just need a container with a couple classes:

@*File Browser*@
<div id="MyCoolModal">
@* Content is loaded via Ajax in CKEditor insertimage plugin *@
</div>

The ID can change and you can add additional classes.

Using the File Browser

To actually use the file browser, you need to instantiate it on a jQuery element, for example:

$('#MyCoolModal').fileBrowser();

This will reveal the file browser modal, and allow you to start browsing files.

To make the plugin useful, you need to add a callback function. This callback function gets fired when the user clicks the Insert button on a file. The callback gets passed an object with all of the properties of the chose file. Here is an example of how you might use it to select a featured image on an event:

$('.browse-files').on('click', function () {
$('#MyCoolModal').fileBrowser(function (object) {
if (object.type === 'image' && object.src) {
$("#FeaturedImage").attr("value", object.src);
$("#FeaturedImageModal").reveal();
}
});
});

Options

There are some additional options you can pass to the File Browser. These are passed in an object as the first parameter like so: $('#MyCoolModal').fileBrowser({ my: options }, callback)

directory Type : string Default : null Specify a directory to be loaded when the file browser first opens.

isEditor Type : boolean Default : true Set to false if initializing on something isn't a code editor. Mostly this keeps the browser from blowing up if the user doesn't enter link text on a non-image file.

Image Properties

The object returned on an image will look like this:

{
type: 'image',
src: '/path/to/image.jpg',
alt: 'This is some bad alt text',
align: 'left'
}

Document Properties

If the chose file is not an image, the returned object will look like this:

{
type: 'document',
href: '/path/to/file.pdf',
title: 'This is a bad title',
text: 'Click here for cool PDF'
}

 

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×