This example illustrates how to insert an image stored in a database into the ASPxHtmlEditor form by using ImageSelector.
ASPxHtmlEditor does not have a built-in capability to show binary data stored in a database. Therefore, it is necessary to define a custom handler, which dynamically gets an image from the database and sends it to the user as the handler's response . For this purpose the ASHX generic handler is used. You can learn more about HTTP Handlers here: HTTP Handlers and HTTP Modules Overview.
In the current example images are inserted into the ASPxHtmlEditor form via ImageSelector in the following format:
[ASPx]<imgsrc="Image.ashx?path=Salvador Dali/1910 - 1927/CrepuscularOldMan.jpg"alt=""/>
Update for version 15.1.8 and newer versions
Starting from version 15.1.8, we have added the capability to operate files and folders that are stored in a physical file system, or a database, or cloud services in ASPxHtmlEditor's built-in ASPxFileManager control.
The ProviderType property is used to specify the type of a storage where a current file system is contained. See the File System Providers Overview topic to learn more.
To accomplish this task, create your own File System Provider, assign its name to the CustomFileSystemProviderTypeName property and set the ProviderType property to Custom, so the built-in ASPxFileManager control will operate a custom File System Provider.
Use the RootFolderUrlPath property to set the path to an image handler. In this handler, get the image data and write it into Response.
For older versions:
To accomplish the described task, it is necessary to execute the following steps:
1) Open the SelectImageForm.ascx.cs page;
2) Comment or delete the following code to avoid incorrect RootFolder setting:
[C#]protectedvoidPrepareFileManager(){//FileManager.Settings.Assign(HtmlEditor.SettingsImageSelector.CommonSettings); //if(string.IsNullOrEmpty(FileManager.Settings.RootFolder)) // FileManager.Settings.RootFolder = HtmlEditor.SettingsImageUpload.UploadImageFolder; ... }
3) Change the FileManager_CustomJSProperties event to set the path to an image handler:
[C#]protectedvoidFileManager_CustomJSProperties(objectsender,DevExpress.Web.ASPxClasses.CustomJSPropertiesEventArgse){e.Properties["cp_RootFolderRelativePath"]="Image.ashx?path=";}
4) Get an image from a database and show it in the ASPxHtmlEditor form :
a) Create an image handler (*.ashx );
b) In this handler, parse Request.QueryString and get an image from a database by using the parsed path;
c) Write the obtained image into Response.