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:
In 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 bool called 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, episerverscriptmanager.js and system.js. These scripts are required by Episerver to launch an Episerver styled modal.
The code about is calling a Javascript function. In the components corresponding view file, you will need to define the OpenFileDialog function:
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 browserselectionmode. In 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 OK, cancel or 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 🤘
