Uploading Image with API and javascript

Question

I understand how to upload images using mvc with razor pages

 

Now i would like to upload a image using Javascript .

 

Javascript code:

function CreateProduct() {

    event.preventDefault();
    const Titleform = document.getElementById("TitleFelt");
    const Priceform = document.getElementById("priceFelt");
    const quantityform = document.getElementById("Quantityfelt");

    const file = document.getElementById("fileupload"); //the File Upload input
    const formdata = new FormData();

    formdata.append("userpic", file.files[0],'Test1.jpg');
    };
    fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },

        body: formdata
    })
        .then(response => response.json())
        .then(result => {
            console.log('succes', result);
        })
        .then(() => {
            GetProducts();

        })
            .catch(error => console.log('unable to do something', error));
}

and my asp net core action:

[HttpPost]
public async Task<IActionResult> PostProduct(IFormFile formFile)
{
    Product pr = new Product()
    {
         Title = "test",
         Price = 2,
         FilePath = formFile.FileName
    };

    _context.products.Add(pr);
    await _context.SaveChangesAsync();
    return Ok();
}

I am getting a 415 error in the browser console log

while it was a JPG image that i tried to upload

So i dont really understand it