0

Super newbie to ASP.NET Core with React, and try to build "upload file" functions.

From my react component, I have input as follows, and trigger UploadFile function

<input type="file" onChange={(event) => UploadFile(event)} />

and in UploadFile function, it looks like this

    function UploadFile(e) {
        var file = e.target.files[0];
        var formData = new FormData();
        formData.append("file", file);
        axios.post("/FileUpload/SingleFile", formData);
    }

and the controller for SingleFile looks like this

        public IActionResult SingleFile(IFormFile file)
        {
            using (var fileStream = new FileStream(Path.Combine(_dir, "file.png"), FileMode.Create, FileAccess.Write))
            {
                file.CopyTo(fileStream);
            }

            return RedirectToAction("Index");
        }

But having a bit tricky time to figure out what is the right url path to pass on to the axios.post(???, formData).

Is the path should be
"/'controller name'/'IActionResult method name'"??

With the current path, I get an 404 error which means wrong path.

Help!

yoonvak
  • 303
  • 1
  • 3
  • 15

1 Answers1

0

The path I had was correct, but the problem was that I was using ASP.NET Core 3.0 so I need to generate the antiforgery token.

The answer is listed here Enable Antiforgery Token with ASP.NET Core and JQuery

yoonvak
  • 303
  • 1
  • 3
  • 15