In this tutorial, you will learn how to create an image picker within the Episerver admin area, for Episerver 6. To get started, create a new user control

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 :

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 textbox 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.item[0].path'. The last bit is just the call to EPi.CreateDialog to load the modal. Source code available here.