How to send form data from javascript to web api as IFormFile

Question

I'm trying to send request with pdf file to test API, I trigger method from JavaScript which is executing method on .net core web api.

My friend just sent me an screenshot from postman what kind of request I should create:

Based on this image I figure out that I need to create post request like this:

{
  "access_name": "employee",
  "product":"{\"product_id\":\"\",\"group_id\":\"1\",\"subgroup_id\":\"\",\"employee_id\":\"28\"}"
  "product_document": { // File }
}

From the postman I realized it's file-type, so I'm wondering how could I send file type with other informations to my server.

Here is my frontend code:

let f = new FormData();
f.append('File', file);
f.append('DocumentType', file.documentType);

objectToSend = {
    ...values,
    document: f,
};


await createProduct(objectToSend);

export const createProduct = async data => {
  return axiosWrapper.request({
    url: `/products`,
    method: 'POST',
    data: data,
  });
};

Here's how it looks on the server:

// POST: api/products
[HttpPost]
public async Task<IActionResult> Post(Product objectToCreate)
{
 // Create product
}

And my Product class which is containg IFile where I should kept file..

  // Dont worry about props name as I map them somewhere in the middle
  public class Product
    {
        public long Id { get; set; }
        public string ProductTitle{ get; set; }
        public string Brand { get; set; }
        public string ProductType { get; set; }
        public IFormFile Document { get; set; } // Here I wanted to receive doc as IFormFile but this wont work
    }

But this is not working, since I'm getting bad request all the time because obliviously I don't know how to send IFormFile from frontend..

Answer 1

This is something that postman will generate for you:

var form = new FormData();
form.append("", "yourfile.pdf");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://",
  "method": "POST",
  "headers": {},
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

This code is not perfect but this is pretty simple to start with