We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to open a Word document available in the file explorer control using DocumentEditor

Platform: JavaScript - EJ 2 |
Control: DocumentEditor

You can open a Word document in the Document Editor control while clicking the Word document from the FileExplorer control using its beforeOpen event.

HTML

<html>
<head>
<!-- Essential JS 1 default theme -->
    <link href=" http://cdn.syncfusion.com/16.1.0.24/js/web/flat-azure/ej.web.all.compatibility.min.css " rel="stylesheet" type="text/css" />
    <!-- Essential JS 2 material theme -->
    <link href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" rel="stylesheet" type="text/css" />
 
    <!-- Essential JS 1 scripts -->
    <script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="https://cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js" type="text/javascript"></script>
 
    <!-- Essential JS 2 script -->
    <script src=" https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
    <script>
        //Extend ej namespace with Syncfusion
        $.extend(ej, Syncfusion)
    </script>
</head>
<body>
<div id="target">
    <div id="filePicker_target">
        <div id="fileExplorer"></div>
    </div>
    <div id=dialog>
        <div id="container"></div>
    </div>
</div>
</body>
</html>

 

JS

$("#fileExplorer").ejFileExplorer({
    "isResponsive": true,
    "layout": "tile",
    "width": "100%",
    "fileTypes": "*.png, *.gif, *.jpg, *.jpeg, *.docx",
    "path": "~/FileExplorerContent/",
    "ajaxAction": "/Home/FileActionDefault",
    "minWidth": "150px",
    "beforeOpen": "onBeforeOpen"
});
 
var dialog = new ejs.popups.Dialog({
    "height": "100%",
    "isModal": true,
    "showCloseIcon": true,
    "visible": false,
    "zIndex": 0.0,
    "beforeOpen": onDialogBeforeOpen,
    "close": onDialogClose,
    "open": resizeEditor
});
dialog.appendTo("#dialog");
 
var container = new ejs.documenteditor.DocumentEditorContainer({
    "enableLocalPaste": false,
    "enableToolbar": true,
    "restrictEditing": false,
    "showPropertiesPane": false
});
container.appendTo("#container");
 
var filePicker = document.getElementById("filePicker_target");
 
function onBeforeOpen(args) {
 
    if (args.itemType == "File" && (/\.(doc|docx|rtf|txt|html)$/i).test(args.model.selectedItems[0])) {
        dialog.show();
        var filePath = args.model.selectedFolder + args.model.selectedItems[0];
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', "/api/DocumentEditor/Import?filePath=" + filePath, true);
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState === 4) {
                if (httpRequest.status === 200 || httpRequest.status === 304) {
                    container.documentEditor.open(httpRequest.responseText);
                } else {
                    console.error(httpRequest.response);
                }
            }
        }
            ;
        httpRequest.send();
    }
}
 
function resizeEditor() {
    var container = document.getElementById("container").ej2_instances[0];
    container.documentEditor.resize();
}
function onDialogBeforeOpen() {
    filePicker.style.display = 'none';
    setTimeout(function () {
        resizeEditor();
    });
}
function onDialogClose() {
    filePicker.style.display = 'block';
}
 

 

WEB API

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using EJ2WordDocument = Syncfusion.EJ2.DocumentEditor.WordDocument;
 
// To process the import request.
        [HttpPost]
        [Route("Import")]
        public HttpResponseMessage Import(string filePath)
        {
            filePath = System.Web.HttpContext.Current.Server.MapPath(filePath);
            //If the path from local drive.
            Stream fileStream = System.IO.File.Open(filePath, FileMode.Open, System.IO.FileAccess.Read);
            fileStream.Position = 0;
 
            int index = filePath.LastIndexOf('.');
            string type = index > -1 && index < filePath.Length - 1 ?
                filePath.Substring(index) : ".docx";
 
 
            EJ2WordDocument document = EJ2WordDocument.Load(fileStream, GetFormatType(type.ToLower()));
            string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
            document.Dispose();
            fileStream.Close();
            return new HttpResponseMessage() { Content = new StringContent(json) };
 
        }
        internal static Syncfusion.EJ2.DocumentEditor.FormatType GetFormatType(string format)
        {
            if (string.IsNullOrEmpty(format))
                throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
            switch (format.ToLower())
            {
                case ".dotx":
                case ".docx":
                case ".docm":
                case ".dotm":
                    return Syncfusion.EJ2.DocumentEditor.FormatType.Docx;
                case ".dot":
                case ".doc":
                    return Syncfusion.EJ2.DocumentEditor.FormatType.Doc;
                case ".rtf":
                    return Syncfusion.EJ2.DocumentEditor.FormatType.Rtf;
                case ".txt":
                    return Syncfusion.EJ2.DocumentEditor.FormatType.Txt;
                case ".xml":
                    return Syncfusion.EJ2.DocumentEditor.FormatType.WordML;
                default:
                    throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
            }
        }

 

File Manager.

 

Opened Word Document.

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/DocumentEditorWithFilePicker-698218240 

In the previously given sample, the FileExplorer control is provided with the Word documents. By using the Document Editor control, you can open a Word document by selecting it.

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile