How To Do A Rest Api Post Request With Fileupload To An Azure Ad Protected Rest Api

I have the following .net WEB API // [Authorize] public class TenantController : ApiController { public async Task> GetTenants() {

Solution 1:

The adalFetch function takes a fetch object, you can choose to use any npm package like fetch or Axios and pass it on. Refer the this issue from the react-adal repository. Here I'm writing a small snippet to send file with upload progress.

importReact, { Component } from"react";
import { adalApiFetch } from"./config";
constAPI_SERVER = "example.azure.com/upload";

classFilUploadextendsComponent {
  constructor(props) {
    super(props);
  }

upload(e) {
 let data = newFormData();
 //Append files to form datalet files = e.target.files;
    for (let i = 0; i < files.length; i++) {
      data.append("files", files[i], files[i].name);
    }

//add other objects or params
data.append("myobject", { name: "Mark" });
data.append("myobject1", { name: "Sarah" });

returnnewPromise((resolve,reject) => {
  adalApiFetch(fetch, API_SERVER,{
      method: "post",
      headers: { "Content-Type": "multipart/form-data" },
      body: data
    })
    .then(res => res.json())
    .then(response => {
      returnresolve(response);
    })
    .catch(err => {
      returnreject(err);
    });
});
}
  render() {
    return (
      <div><inputmultipleonChange={e => this.upload(e)} type="file" id="files" />
      </div>
    );
  }
}

exportdefaultFilUpload;

For the ASP.net side please refer the following answer jQuery ajax upload file in asp.net mvc