404 error on Async Upload

[Razie]

Hi!

I have tried following the Asynchronous upload documentation, but whenever I try to upload file(s), it always fails and the server responded with a status of 404.

Thanks in advance for your help.

My code is as follows:

HTML:

<div>
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .Save("SaveAsync", "Home")
            .Remove("RemoveAsync", "Home")
            .AutoUpload(true)
        )
    )
</div>

Controller:

public class HomeController : Controller
    {
        private IWebHostEnvironment _WebHostEnvironment;
        
        public HomeController(IWebHostEnvironment webHostEnvironment)
        {
            _WebHostEnvironment = webHostEnvironment;
        }

        public async Task<ActionResult> SaveAsync(IEnumerable<IFormFile> files)
        {
            // The Name of the Upload component is "files".
            if (files != null)
            {
                foreach (var file in files)
                {
                    var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

                    // Some browsers send file names with full path.
                    // We are only interested in the file name.
                    var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
                    var physicalPath = Path.Combine(_WebHostEnvironment.WebRootPath, "App_Data", fileName);

                    using (var fileStream = new FileStream(physicalPath, FileMode.Create))
                    {
                        await file.CopyToAsync(fileStream);
                    }
                }
            }

            // Return an empty string to signify success.
            return Content("");
        }

        public ActionResult RemoveAsync(string[] fileNames)
        {
            // The parameter of the Remove action must be called "fileNames".

            if (fileNames != null)
            {
                foreach (var fullName in fileNames)
                {
                    var fileName = Path.GetFileName(fullName);
                    var physicalPath = Path.Combine(_WebHostEnvironment.WebRootPath, "App_Data", fileName);

                    // TODO: Verify user permissions.

                    if (System.IO.File.Exists(physicalPath))
                    {
                        System.IO.File.Delete(physicalPath);
                    }
                }
            }

            // Return an empty string to signify success.
            return Content("");
        }

        
    }

 

[Tsvetomir]

Hi Razie,

Thank you for the provided code snippets. Indeed, I have investigated them, and based on the version of the ASP.NET Core that is used, you might not need to add the Async suffix in the URL set up on the client-side. Namely, you could try using the following options:

.Save("Save", "Home")
.Remove("Remove", "Home")

Could you give the above a try and let me know how it works out for you?

 

Kind regards,
Tsvetomir
Progress Telerik

[Seth]

I struggled with this for around an hour until I stumbled across this post and it was the issue indeed.

[Tsvetomir]

I am happy to hear that the solution has worked out for you! Thank you for sharing your feedback that verifies the solution in multiple scenarios!

[Jonathan]

I had the same issue and this resolved it.