ASP .NET MVC Core WEB API upload file showing error using Angular JS

Question

Here is my client side html (I used ng file upload)

<button type="file" ngf-select="uploadFileToUrl($file)"
        ngf-max-size="100MB">
    <!--ngf-max-height="1000"-->
    Photo
</button>

Here is my client side js

$scope.uploadFileToUrl = function (file) {
        console.log(file) // Here console prints my file information 
        alert(file);
        var data = new FormData();
        data.append('photo', file)

        $.ajax({
            type: "POST",
            url: "http://localhost:22475/api/FileUpload",
            contentType: false,
            processData: false,
            data: data,
            success: function (message) {
                alert(message);
            },
            error: function () {
                alert("There was error uploading files!");
            }
        });
    }

Here is my server side

 private IHostingEnvironment hostingEnv ;

    public FileUploadController(IHostingEnvironment env)
    {
        this.hostingEnv = env;
    }

[HttpPost]
public async Task<IActionResult> PostProfilePicture(ICollection<IFormFile> files) // Here i get file count 0 on tool tip
{
    var uploads = Path.Combine(hostingEnv.WebRootPath, "uploads");
    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
            {
                await file.CopyToAsync(fileStream);
            }
        }
    }
    return null;
}

Here i get file upload error i searched through net, all i got this code but its not working, can anyone help and point out what am i doing wrong here..

Answer 1

Ya i got my answer

public async Task<IActionResult> Post(ICollection<IFormFile> files)
{
    var v = Request.Form.Files[0];
    var uploads = Path.Combine(hostingEnv.WebRootPath, "uploads");


            using (var fileStream = new FileStream(Path.Combine(uploads, v.FileName), FileMode.Create))
            {
                await v.CopyToAsync(fileStream);
            }
    return null;
}

Take the file from request and upload it,Thanku

Answer 2

You are calling action result name in URL is 'FileUpload' and Server side action result name is 'PostProfilePicture'. You need to maintain same name in both sides or you can add route name above httppost in server side code

[Route("api/FileUpload")]
[HttpPost]