How to Remove Physical Files in kendoUpload

Question

I am using Kendo UI uploader. When I upload the files using kendoUpload, actually I rename the files using Guid.NewGuid() in server side. The problem is that, when I want to remove the files, the original file name is sent to remove handler in server side instead of guidName. How can I solve this issue?

My remove handler in server side is as follows:

[HttpPost]
public ActionResult RemoveTemp(string[] fileNames)
{
    List<string> removedFiles = new List<string>();
    string tempPath = Server.MapPath("~/temp/");
    if (fileNames != null)
    {
        foreach (var fullName in fileNames)
        {
            File.Delete(tempPath + fullName);

            removedFiles.Add(fullName);
        }
    }

    return Json(removedFiles.ToArray());
}

My remove event in client side is as follows:

    remove: function (e) {
                    var fileToRemove = e.files[0].name;

                    for (var i = 0; i < vm[item].length; i++) {
                        if (vm[item][i].originalName == fileToRemove) {
                            vm[item].splice(i, 1);

                            break;
                        }
                    }

// I don't know how to send guidNames here using e.data
                }

score 2 · Answer 1 · answered Jan 08 '18 at 03:53

You need to include the name of the saved files in the upload response, and at the client, set the name of the e.files accordingly.

Sample upload action:

    [HttpPost]
    public ActionResult UploadFiles()
    {
        // Note: We use Request.Files instead of a parameter input, to be independent of the name of the Kendo upload component
        var count = Request.Files.Count;
        if (count == 0)
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

        var result = new List<UploadedFile>(count);
        for (var i = 0; i < count; i++)
        {
            HttpPostedFileBase file = Request.Files[i];
            if (file == null || (file.ContentLength == 0 && string.IsNullOrEmpty(file.FileName)))
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

            // Some browsers send file names with full path. We are only interested in the file name.
            var fileName = Path.GetFileName(file.FileName);

            var tempKey = _svcUpload.SaveTempFile(file.InputStream, fileName);
            result.Add(new UploadedFile
            {
                TempKey = tempKey,
                Name = fileName,
                Extension = Path.GetExtension(file.FileName),
                Size = file.ContentLength
            });
        }

        return Json(result);
    }

_svcUpload.SaveTempFile() saves an uploaded file and returns its temp key (which can be the GUID of your renamed file). We include the temp key, along with other file info, in the response.

Here is the client-side upload-success handler:

function fileUploadSuccess(e) {
    if (e.operation === 'upload') {
        for (var i = 0; i < e.response.length; i++) {
            var tempKey = e.response[i].TempKey;
            e.files[i].name = tempKey;
        }
    }
}

How to Remove Physical Files in kendoUpload

1 Answers1