File Browser

17 Feb 20222 minutes to read

Rich Text Editor allows to browse and insert images in the edit panel using the file browser. File browser allows the users to browse and select a file or folder from the file system and it supports various cloud services.

The following example explains how to configure the file browser within the Rich Text Editor component.

  • Configure the FileManager toolbar item in the toolbarSettings API items property.
  • Set enable property as true on fileManagerSettings property to make the file browser in the Rich Text Editor to appear on the FileManager toolbar click action.
<ejs-richtexteditor id="fileBrowser">
    <e-content-template>
        <div>
            <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
            <p><b>Get started Quick Toolbar to click on the image</b></p>
            <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
            <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='@Url.Content("~/images/RichTextEditor/RTEImage-Feather.png")' />
        </div>
    </e-content-template>
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
    <e-richtexteditor-filemanagersettings enable="true" path="/Pictures/Food" ajaxSettings="@ViewBag.ajaxSettings"></e-richtexteditor-filemanagersettings>
</ejs-richtexteditor>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        string hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
        ViewBag.ajaxSettings = new {
            url = hostUrl + "api/FileManager/FileOperations",
            getImageUrl = hostUrl + "api/FileManager/GetImage",
            uploadUrl = hostUrl + "api/FileManager/Upload",
            downloadUrl = hostUrl + "api/FileManager/Download"
        };
        ViewBag.items = new[] { "FileManager", "Image" };
        return View();
    }
}