Send HTTP Request to .netcore API having IFormFile input param from Typescript

When working with TypeScript and .NET Core APIs, you may come across a scenario where you need to send an HTTP request to an API endpoint that expects an IFormFile input parameter. In this blog post, we will explore multiple solutions to tackle this problem.

Solution 1: Using FormData

One way to send an IFormFile input parameter from TypeScript is by using the FormData object. This object allows you to construct key-value pairs, where the key represents the parameter name and the value represents the file itself.


const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

fetch('/api/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

In the code snippet above, we first retrieve the selected file from an input element with the id ‘fileInput’. We then create a new instance of the FormData object and append the file to it using the append method. Finally, we send the HTTP request to the ‘/api/upload’ endpoint using the fetch function.

Solution 2: Using FileReader

Another approach is to use the FileReader object to read the file as a binary string or data URL, and then include it in the request payload.


const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

const reader = new FileReader();

reader.onload = function(event) {
  const fileData = event.target.result;

  fetch('/api/upload', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/octet-stream'
    },
    body: fileData
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
};

reader.readAsArrayBuffer(file);

In the code snippet above, we first retrieve the selected file from an input element with the id ‘fileInput’. We then create a new instance of the FileReader object and set its onload event handler. Inside the event handler, we read the file as an array buffer using the readAsArrayBuffer method. Finally, we send the HTTP request to the ‘/api/upload’ endpoint, including the file data in the request body.

Both solutions should work for sending an HTTP request to a .NET Core API with an IFormFile input parameter from TypeScript. Choose the one that best fits your requirements and coding style.

That’s it! You now have multiple solutions to send an HTTP request to a .NET Core API with an IFormFile input parameter from TypeScript. Feel free to try them out and see which one works best for your specific use case.

Happy coding!

Send HTTP Request to .netcore API having IFormFile input param from Typescript