Uploading a file to a API with fetch POST

JavaScript
1

I am trying to send a image to my API
But I recieve a error:

I keep getting 415 error
If I am correct it meant that I that API wont accept this file.
even though its a JPG image.

I dont know if the problem is in my javascript or my API

My 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');


    const item = {
        title: JSON.stringify(Titleform.value),
        price: JSON.stringify(Priceform.value),
        quantity: JSON.stringify(quantityform.value),
        formFile: formdata
    };
    fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },

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

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

My API ( asp net core)

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

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

A 415 means whatever the guy or gal who wrote the server wants it to mean.

But generally, any 4xx error is supposed to mean that the client has screwed something up and 415 usually means a rejected media type. In this context, I’d expect that the server is rejecting it because the media you are trying to send it are not the right type.

At first glance, you have this

    const item = {
        title: JSON.stringify(Titleform.value),
        price: JSON.stringify(Priceform.value),
        quantity: JSON.stringify(quantityform.value),
        formFile: formdata
    };

then

    fetch(url, {
        // ...
        body: item
    })

I would expect you to stringify what you are passing as the body, not the individual members. Can you send an object as the body? I think you’re supposed to stringify this.

3

I have also tried this:
without stringifying the file object

 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
    })

I get the same error

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.