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 get the modified uploaded file name in server side while delete a file?

Platform: ASP.NET MVC |
Control: Uploadbox

How to modify uploaded file name and delete the modified file in Uploadbox?



In the UploadBox save process, let us assume that a file is uploaded to server and after some modifications, save the file with another name in the server. Now when that file is required to be deleted from the server using the UploadBox, it cannot be done using the old name. So, the modified name from the server is required during the file delete process. 



To get started with this example, refer to the Getting Started section in the Uploadbox’s UG documentation and create a basic UploadBox example.

In the Save handler, the uploaded file name is altered and saved in a location in the server.  Now that is done, the updated name along with original name is returned to the UploadBox as a JSON. Refer to the following code.

public ActionResult SaveDefault(IEnumerable<HttpPostedFileBase> UploadDefault)
    foreach (var file in UploadDefault)
        var fileName = Path.GetFileNameWithoutExtension(file.FileName) + "_" + DateTime.Now.ToString("yyyyMMddHHmmssffff") + Path.GetExtension(file.FileName);
        fileName = fileName.Replace(' ', '_');
        string path = Server.MapPath("~/App_Data");
        if (Directory.Exists(path) == false)
        var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
    List<uploadFile> Uploadfiles = new List<uploadFile>();
    Uploadfiles.Add(new uploadFile { oldname = file.FileName, newname = fileName });
    return Json(Uploadfiles);
    return Content("");
public class uploadFile{
    public string oldname { get; set; }
    public string newname { get; set; }


The client-side “Success” event will be triggered when each upload action is successful. In that event, the JSON returned from the server with the modified file name can be accessed and added as a new attribute to the span element of the corresponding li element. Refer to the following code: 

var txtArray;
function success(args) {
    txtArray = JSON.parse(args.responseText);
    $($(args.files).data("filelist").find(".e-file-name-txt")[0]).attr("data-newname", txtArray[0].newname)


After the new name is added to the uploadbox as an attribute, some changes in the UploadBox’s internal _xhrOnRemove method are required to access the new name instead of the old value. Refer to the following code.

var bool=false;
var filename;
ej.Uploadbox.prototype.remove = ej.Uploadbox.prototype._xhrOnRemove;
ej.Uploadbox.prototype._xhrOnRemove = function (e, fileItem) {
    var filename = fileItem.find(".e-file-name-txt").attr("data-newname"), proxy = this;
        url: this.model.removeUrl,
        type: "POST",
        data: "fileNames=" + filename,
        success: function () {
            proxy._trigger("remove", { fileStatus: proxy._file });



2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
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