Search results

Import in ASP.NET MVC DocumentEditor control

22 Oct 2021 / 2 minutes to read

In Document Editor, the documents are stored in its own format called Syncfusion Document Text (SFDT).

The following example shows how to open SFDT data in Document Editor.

razor
document-editor.cs
Copied to clipboard
@Html.EJS().DocumentEditor("container").Render()

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        var sfdt = {
            "sections": [
                {
                    "blocks": [
                        {
                            "inlines": [
                                {
                                    "characterFormat": {
                                        "bold": true,
                                        "italic": true
                                    },
                                    "text": "Hello World"
                                }
                            ]
                        }
                    ],
                    "headersFooters": {
                    }
                }
            ]
        };

        documenteditor.open(JSON.stringify(sfdt));
    }); 
</script>
Copied to clipboard
public ActionResult Default()
    {
        return View();
    }

Import document from local machine

The following example shows how to import document from local machine.

razor
document-editor.cs
Copied to clipboard
<input type="file" id="file_upload" accept=".sfdt" style="position:fixed; left:-100em" /> 
@Html.EJS().Button("import").Content("Import").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");        
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        document.getElementById("import").addEventListener("click", function () {
            document.getElementById('file_upload').click();
        });

        document.getElementById('file_upload').addEventListener("change", function (e) {
            if (e.target.files[0]) {
                var file = e.target.files[0];
                if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
                    var fileReader = new FileReader();
                    fileReader.onload = function (e) {
                        var contents = e.target.result;
                        documenteditor.open(contents);
                    };
                    fileReader.readAsText(file);
                    documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
                }
            }
        });
    }); 
</script>
Copied to clipboard
public ActionResult Default()
    {
        return View();
    }

Convert word documents into SFDT

You can convert word documents into SFDT format using the Syncfusion.EJ2.WordEditor.AspNet.MVC4 or Syncfusion.EJ2.WordEditor.AspNet.MVC5 by the web API service implementation. This library helps you to convert word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format. Refer to the following example.

razor
document-editor.cs
Copied to clipboard
<input type="file" id="file_upload" style="position:fixed; left:-100em" /> 
@Html.EJS().Button("import").Content("Import").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");        
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');

        document.getElementById('file_upload').addEventListener("change", function (e) {
            if (e.target.files[0]) {
                var file = e.target.files[0];
                if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
                    loadFile(file);
                }
            }
        });

        function loadFile(file) {
            var ajax = new XMLHttpRequest();
            ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
            ajax.onreadystatechange = function () {
                if (ajax.readyState === 4) {
                    if (ajax.status === 200 || ajax.status === 304) {
                        // open SFDT text in document editor
                        documenteditor.open(ajax.responseText);
                    }
                }
            }
            var formData = new FormData();
            formData.append('files', file);
            ajax.send(formData);
        }
    }); 
</script>
Copied to clipboard
public ActionResult Default()
    {
        return View();
    }

Here’s how to handle the server-side action for converting word document in to SFDT.

Copied to clipboard
[HttpPost]
public HttpResponseMessage Import()
{
    if (HttpContext.Current.Request.Files.Count == 0)
    return null;

    HttpPostedFile file = HttpContext.Current.Request.Files[0];
    int index = file.FileName.LastIndexOf('.');
    string type = index > -1 && index < file.FileName.Length - 1 ?
    file.FileName.Substring(index) : ".docx";
    Stream stream = file.InputStream;
    stream.Position = 0;

    EJ2WordDocument document = EJ2WordDocument.Load(stream, GetFormatType(type.ToLower()));
    string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
    document.Dispose();
    stream.Close();
    return new HttpResponseMessage() { Content = new StringContent(json) };
}

internal static 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 FormatType.Docx;
        case ".dot":
        case ".doc":
            return FormatType.Doc;
        case ".rtf":
            return FormatType.Rtf;
        case ".txt":
            return FormatType.Txt;
        case ".xml":
            return FormatType.WordML;
        default:
            throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
    }
}

See Also