Render File Manager in Internet Explorer

3 Mar 20255 minutes to read

In the Internet Explorer browser, ES6 promise polyfills are required to run the File Manager control. Click this link to learn more about the EJ2 controls’ browser compatibility.

To render the File Manager control in the Internet Explorer browser, add the ES6 promise polyfill script above the Syncfusion^® Essential^® JS 2 Scripts in the layout page.

     <head>
        <!-- ES6 Promise polyfill  -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
        <!-- Syncfusion Essential JS 2 Scripts -->
        <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
     </head>

After adding the script file in the layout page, render the File Manager control. The following example shows how to render the File Manager in IE browser.

CSHTML
Layout_mvc.cshtml
<div class="control-section">
    <div class="sample-container">
        <!-- Declare File Manager control -->
        @Html.EJS().FileManager("filemanager").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings
        {
            Url = "/Home/FileOperations",
            GetImageUrl = "/Home/GetImage",
            UploadUrl = "/Home/Upload",
            DownloadUrl = "/Home/Download"
        }).Render()
        <!-- end of File Manager control -->
    </div>
</div>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
    <!-- ES6 Promise polyfill  -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <!-- Syncfusion Essential JS 2 Scripts -->
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Html.EJS().ScriptManager()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

The output will look like the image below.

File Manager largeicons view