In this tutorial, you will learn how to create an image or file picker within the Episerver admin area, for Episerver 6. To get started, create a new user control:
AdminImagePicker a textbox and button will be used as the components to capture the content editors image. I'm adding an
onclick handler to the button. This handler will call a function called
OpenFileDialog. This function will open a modal that will allow the user to pick an image locally. When a user picks an image the file path will need to be captured. This is why the textbox ID is passed into the function, so its
value can be bound to the user selection. The
value can then be used to upload the image to the server. A
displayImage is also passed in. This flag is used to toggle the file type that the editor is allowed to pick, file or image. I'm also registering two scripts,
system.js. These scripts are required by Episerver to launch an Episerver styled modal.
When the user clicks the open button, a call is made to the JS function
OpenFileDialog(), passing in the
ClientId of the textbox and the image/file switch. In Episerver you can use the Episerver file manager component instead of needing to write components from scratch. The Episerver picker can be found in
edit/FileManagerBrowser.aspx. This component can be configured by loading it and passing in query string parameters. As can be seen on Line 4 and on Line 6 some configurations where these settings are being added to
dialogUrl, if a file has previously been selected when re-opening the dialogue the previous file path is passed in.
The next bit that probably needs talking through is the
callbackMethod. This is the function that the modal will call after the user selects
clear. In this callback function, all states will need to be dealt with. On Line 20, the local path to the file is selected and then returned. The server-side code will use this path to upload the file. The last bit is just the call to
EPi.CreateDialog to load the modal.
That's all there is to it. Source code available here. Happy Coding 🤘