How to open uploaded files in EJ2 TypeScript File Upload

08 Sep 20265 minutes to read

The Uploader component allows you to open and modify a file after it has been uploaded to the server, which can be achieved using the Uploader’s success event. The asyncSettings.saveUrl and asyncSettings.removeUrl must be configured to point to the corresponding server-side Save and Remove actions.

You can retrieve the saved file path in the Uploader’s success event and assign it to a custom attribute (data-file-name) value of the respective file list element to open the uploaded file. Click the respective file element to create a new request along with the saved file path using an HTTP header. On the server side, get the file path from the header and open the file using the Process.Start method.

import { Uploader } from '@syncfusion/ej2-inputs';


let uploadObj: any = new Uploader({
    asyncSettings: {
        saveUrl: 'SaveUrl',
        removeUrl: 'RemoveUrl'
    },
    success: onUploadSuccess
});
uploadObj.appendTo('#fileupload');

function onUploadSuccess(args) {
    // fetching the generated li elements
    var liElements = this.uploadWrapper.querySelectorAll('.e-upload-file-list');
    for (var i = 0; i < liElements.length; i++) {
        if (liElements[i].getAttribute('data-file-name') == args.file.name) {
            liElements[i].addEventListener('click', (e) => { openFile(args, e) })
            // The file path must be updated from the server end in the response status description.
            liElements[i].setAttribute('file-path', args.e.target.statusText);
        }
    }
}

function openFile(args, e) {
    if (!e.target.classList.contains('e-file-delete-btn') && !e.target.classList.contains('e-file-remove-btn'))
    {
        let ajax = new XMLHttpRequest();
        // create new request for open the selected file
        ajax.open("POST", '/Home/openFile');
        var liElements = document.getElementsByClassName('e-upload')[0].querySelectorAll('.e-upload-file-list');
        for (var i = 0; i < liElements.length; i++) {
            if (liElements[i].getAttribute('data-file-name') == args.file.name) {
                // Added the file path in the header to retrieve it on the server side.
            ajax.setRequestHeader('filePath', liElements[i].getAttribute('file-path').toString());
            }
        }
        ajax.send();
    }
}

Server side for open and edit the uploaded files

public void Save() {
    if (!System.IO.File.Exists(fileSavePath))
    {
        httpPostedFile.SaveAs(fileSavePath);
        HttpResponse Response = System.Web.HttpContext.Current.Response;
        Response.Clear();
        Response.ContentType = "application/json; charset=utf-8";
        // Sending the file path to client side
        Response.StatusDescription = fileSavePath;
        Response.End();
    }
}

[AcceptVerbs("Post")]
public void openFile()
{
    // Check whether the file is available in the corresponding location
    if (System.IO.File.Exists(Request.Headers.GetValues("filePath").First()))
    {
        // This will open the selected file from server location in desktop
        Process.Start(Request.Headers.GetValues("filePath").First());
    }
}

You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.