Episerver : Creating An Admin Image Picker

Tutorial time again!  I’ve recently had a mini nightmare trying to create an image picker in the Admin.  I spent a few hours searching around the web but I couldn’t see any nice and easy EPi-plugins to use (everything was editor based) .  After a bit of Googling, I found this article about creating a custom web control.  I had a quick look at the code and there were a few things I didn’t really like about the class; firstly, the mark-up and JavaScript were all defined in the code behind and I needed to style it the same as the reset of the form (using bootstrap).  Secondly,  when you try and implement the code,  all you get returned in your text-box is an [object Object] message rather than the file path.

The control uses the EPi modal file manager dialogue, pre-set in image mode to allow the user to pick Epi-server images. You can find a bit more information about the API here.

First I created my new user control, as seen below :

public partial class AdminImagePicker : System.Web.UI.UserControl
{
/// 
/// Code for document browsing
/// 
public bool DisplayImagesOnly { get; set; }
/// 
/// Returns the path to the selected file
/// 
public string FilePath
{
get
{
return tbFilePath.Text;
}
set { tbFilePath.Text = value; }
}
public AdminImagePicker()
{
DisplayImagesOnly = true;
}
protected void Page_Load(object sender, EventArgs e)
{
SetupControl();
}
/// 
/// Setup control and include necessary scripts
/// 
private void SetupControl()
{
submitButton.Attributes.Add("onclick", string.Format("OpenFileDialog('{0}', {1})", tbFilePath.ClientID, DisplayImagesOnly.ToString().ToLower()));
ClientScriptUtility.RegisterClientScriptFile(Page, UriSupport.ResolveUrlFromUtilBySettings("javascript/episerverscriptmanager.js"));
ClientScriptUtility.RegisterClientScriptFile(Page, UriSupport.ResolveUrlFromUIBySettings("javascript/system.js"));
}
}

So, a quick run through of what’s going on.  In the front end I use a textbox and button as the UI.  I’m adding an onclick handler which will pass the reference to the textbox (to display the returned URL from the modal) and a bool to toggle the display type (file or image).

I’m also registering episerverscriptmanager.js and system.js, the scripts needed to create the Epi modal. The front end is a bit more complex :

<script>// <![CDATA[
function OpenFileDialog(displayTextboxId, displayImage)
{
var browserselectionmode;
if (displayImage)
{
browserselectionmode = 'browserselectionmode=image';
}
else
{
browserselectionmode = 'browserselectionmode=file';
}
var node = document.getElementById(displayTextboxId);
var dialogUrl = '<%=EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/FileManagerBrowser.aspx")%>?' + browserselectionmode + '&#038;selectedfile=' + encodeURIComponent(node.value);
var linkAttributes = new Object();
var dialogArguments = linkAttributes;
var features = { width: 600, height: 412 };
var callbackArguments = new Object();
callbackArguments.value = displayTextboxId;
var callbackMethod = function (returnValue, callbackArgs)
{
if (returnValue != undefined &#038;&#038; returnValue != 0)
{
var path = returnValue.items[0].path;
document.getElementById(callbackArguments.value).value = path;
EPi.DispatchEvent(callbackArgs, 'change');
}
else {
Clear();
}
};
EPi.CreateDialog(
dialogUrl,
callbackMethod,
callbackArguments,
dialogArguments,
features);        
}
function Clear() {
var textboxId = '<%= tbFilePath.ClientID %>';
var node = document.getElementById(textboxId);
node.value ='';
}
// ]]></script>

When the user clicks the open button, a call is made to the JS function OpenFileDialog(), passing in the Client id of the textbox and the image/file switch.  The first confusing bit is creating the URL to open the modal, seen in dialogUrl. When opening the modal you need to pass in any parameters to define how it’s going to behave.  In mine, I’m passing the display mode and the path to a selected file if it exists, e.g. if a file has previously been selected when re-opening the dialogue, that file will already have been pre-selected.

The next bit that probably needs talking through is the callbackMethod (the function the modal will call when the user selects OK, cancel or clear). On ‘rawberts’ example I there’s a bug so the modal always returned ‘object Object’ into the texbox instead of the path. I think originally the callback function only returned a single parameter, now it returns an array.  So I had to change my code like so ‘var path = Value.items[0].path’. The last bit is just the call to EPi.CreateDialog to load the modal.

Source code available here.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts