How to open and edit uploaded files in ASP.NET Core File Upload

24 Aug 20265 minutes to read

The Uploader control allows you to open the file after uploading it to the server. You can achieve this using the success event of the Uploader.

In the success event, retrieve the saved file path and assign it to the custom attribute (data-file-name) of the corresponding file list element. When you click the file element, a new request is sent 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.

@using Syncfusion.EJ2

@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}



<div class="control_wrapper">
    <ejs-uploader id="UploadFiles" success="onUploadSuccess" asyncSettings="@asyncSettings">
    </ejs-uploader>
</div>




    <script>
      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', () => { openFile(args, event) })
            // File path have to update from server end in 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'))
    {
        var 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 header to get it in server side.
            ajax.setRequestHeader('filePath', liElements[i].getAttribute('file-path').toString());
            }
        }
        ajax.send();
    }
}
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
    public partial class UploaderController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            return View();
        }
        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());
			}
		}
	}
}

Explore the ASP.NET Core File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET Core File Upload example to see how to browse and select files for upload to the server.