Solution: DevExpress HtmlEditor’s “Insert Image” and “Insert Link” dialogs are slow

Hello,

Recently I’ve been struggling with annoying issue regarding ASPxHtmlEditor of DevExpress. I will share the problem, the cause of it and its solution.

Problem

We have web application where we use ASPxHtmlEditor. We have 3 different environments where we deploy our web application. We used the editor’s image upload option and everything was perfect until we deployed on our production environment. The editor’s ‘Insert Image’ and ‘Insert Link’ dialogs needed 5 minutes to open. It just kept loading…

aspxhtmleditor-hangs

The other dialogs were fine. We double and triple-checked for any differences between the environments in order to find what might cause the problem. Everything concerning the editor was exactly the same. We also contacted the DevEx support, but to no avail. Here you can see other people complaining and having the same problem:

Solution

We use Web Site Project, not Web Application Project. By accident we find out that the cause of the issue is a folder in our web site which holds tens of GB’s of files and folders. The size of the folder in every other environment was very small. We thought that for some reason the editor traversed recursively through all the folders of the website and that causes the slowdown. The DevExpress support encouraged us to set the image upload options correctly, because it might perform some recursive traversals. But why would it do this? There is something called File Manager. This is used internally in ‘Insert Image’ and other dialogs. When we set the options of the AspxHtmlEditor, the File Manager is supposed to go to the directory set for images upload and traverse through all the files in there.

I set up a 60-70 gb folder under my Web Site Project, containing a lot of files and folders, and reproduced the issue locally. I followed a tutorial to get the code from the dialogs in my project – Customization of Default Dialog Forms. After this I debugged it to see where it hangs. It turned out somewhere between Page_Init and Page_Load the File Managers in “SelectImageForm.ascx” and “SelectDocumentForm.ascx” perform recursive traversal through all folders of your project. What you set as options to the image upload does not matter because it is applied after the File Manager do this traversal. At the time of traversal the FileManager options are the default ones. The solution to this is straight-forward – you should set the image upload folder which the FileManager needs before it performs this traversal. Here is a demonstration of the solution – you override the OnInit method and initialize the FileManager:

public partial class SelectImageForm : HtmlEditorUserControl 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        string uploadFolder = ConfigurationManager.AppSettings["EditorUploadPath"]; //~/Uploads/
        this.FileManager.Settings.RootFolder = uploadFolder;
        this.FileManager.Settings.InitialFolder = uploadFolder.Replace("/", "").Replace("~", "");
        this.FileManager.Settings.ThumbnailFolder = "";
        this.FileManager.Settings.UseAppRelativePath = true;
    }

    protected override void PrepareChildControls() 
    {
        Localize();

        base.PrepareChildControls();

        PrepareFileManager();
    }

    //code

    protected void PrepareFileManager() 
    {
        FileManager.Styles.CopyFrom(HtmlEditor.StylesFileManager);
        FileManager.ControlStyle.CopyFrom(HtmlEditor.StylesFileManager.Control);
        FileManager.Images.CopyFrom(HtmlEditor.ImagesFileManager);
        FileManager.Settings.Assign(HtmlEditor.SettingsImageSelector.CommonSettings);
        FileManager.SettingsEditing.Assign(HtmlEditor.SettingsImageSelector.EditingSettings);
        FileManager.SettingsFolders.Assign(HtmlEditor.SettingsImageSelector.FoldersSettings);
        FileManager.SettingsToolbar.Assign(HtmlEditor.SettingsImageSelector.ToolbarSettings);
        FileManager.SettingsUpload.Assign(HtmlEditor.SettingsImageSelector.UploadSettings);
        FileManager.SettingsUpload.ValidationSettings.Assign(HtmlEditor.SettingsImageUpload.ValidationSettings);
        FileManager.SettingsPermissions.Assign(HtmlEditor.SettingsImageSelector.PermissionSettings);
        FileManager.SettingsFileList.Assign(HtmlEditor.SettingsImageSelector.FileListSettings);

        if(string.IsNullOrEmpty(FileManager.Settings.RootFolder))
            FileManager.Settings.RootFolder = HtmlEditor.SettingsImageUpload.UploadImageFolder;

        FileManager.FolderCreating += new FileManagerFolderCreateEventHandler(FileManager_FolderCreating);
        FileManager.ItemDeleting += new FileManagerItemDeleteEventHandler(FileManager_ItemDeleting);
        FileManager.ItemMoving += new FileManagerItemMoveEventHandler(FileManager_ItemMoving);
        FileManager.ItemRenaming += new FileManagerItemRenameEventHandler(FileManager_ItemRenaming);
        FileManager.FileUploading += new FileManagerFileUploadEventHandler(FileManager_FileUploading);
    }
    
    //code
}

You can solve the issue more elegantly by calling the method which set all the options internally – PrepareFileManager(). It’s up to you and your requirements.

aspxhtmleditor-image-works

I hope this was helpful.
Cheers,
Tihomir Iliev.

One thought on “Solution: DevExpress HtmlEditor’s “Insert Image” and “Insert Link” dialogs are slow

Leave a Reply

Your email address will not be published. Required fields are marked *