How to Auto Save Document in ASP.NET MVC DOCX Editor

27 Aug 20267 minutes to read

This article explains how to auto save the document in AWS S3. You can automatically save the edited content in regular intervals of time. It helps to reduce the risk of data loss by saving an open document automatically at customized intervals.

• In the client-side, using content change event, the edited content can be automatically saved in regular intervals of time. Based on contentChanged boolean, the document is sent as DOCX format to server-side using saveAsBlob method at a customized polling interval.

CSHTML

@Html.EJS().DocumentEditorContainer("container").Created("onCreate").EnableToolbar(true).Render()


<script>
    var container;
    var containerPanel;
    var contentChanged =false;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
    container = documenteditorElement.ej2_instances[0];
    container.contentChange=function(){
        contentChanged = true;
    }
    });
    function onCreate() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        setInterval(() => {
            if (contentChanged) {
                //You can save the document as below
                container.documentEditor.saveAsBlob('Docx').then((blob) => {
                    console.log('Saved sucessfully');
                    let exportedDocument = blob;
                    //Now, save the document where ever you want.
                    let formData = new FormData();
                    formData.append('fileName', 'sample.docx');
                    formData.append('data', exportedDocument);
                    /* tslint:disable */
                    var req = new XMLHttpRequest();
                    // Replace your running Url here
                    req.open(
                        'POST',
                        'http://localhost:62869/api/documenteditor/SaveToS3',
                        true
                    );
                    req.onreadystatechange = () => {
                        if (req.readyState === 4) {
                            if (req.status === 200 || req.status === 304) {
                                console.log('Saved sucessfully');
                            }
                        }
                    };
                    req.send(formData);
                });
                contentChanged = false;
            }
        }, 1000);
    }

</script>

• Configure the access key and secret key in web.config file.
• Register the profile in startup.cs.

In web.config, add key like below format:

<appSettings>
    <add key="AWSProfileName" value="sync_development" />
    <add key="AWSAccessKey" value="" />
    <add key="AWSSecretKey" value="" />
</appSettings>

In startup.cs, register profile in below format:

Amazon.Util.ProfileManager.RegisterProfile("sync_development","", "");

• In server-side, Receives the stream content from client-side and process it to save the document in aws s3. Add Web API in controller file like below to save the document in aws s3.

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToS3")]
public string SaveToS3()
{
    IFormFile file = HttpContext.Request.Form.Files[0];
    Stream stream = new MemoryStream();
    file.CopyTo(stream);
    UploadFileStreamToS3(stream, "documenteditor", "", "GettingStarted.docx");
    stream.Close();
    return "Success";
}

public bool UploadFileStreamToS3(System.IO.Stream localFilePath, string bucketName, string subDirectoryInBucket, string fileNameInS3)
{
    AWSCredentials credentials = new StoredProfileAWSCredentials("sync_development");
    IAmazonS3 client = new AmazonS3Client(credentials, Amazon.RegionEndpoint.USEast1);
    TransferUtility utility = new TransferUtility(client);
    TransferUtilityUploadRequest request = new TransferUtilityUploadRequest();

    if (subDirectoryInBucket == "" || subDirectoryInBucket == null)
    {
        request.BucketName = bucketName; //no subdirectory just bucket name.
    }
    else
    {   // subdirectory and bucket name.  
        request.BucketName = bucketName + @"/" + subDirectoryInBucket;
    }
    request.Key = fileNameInS3; //file name up in S3.
    request.InputStream = localFilePath;
    utility.Upload(request); //commencing the transfer  

    return true; //indicate that the file was sent.
}

Get the complete working sample in Auto-Save-documents-in-Word-Processor.