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.

import React, { Component } from "react";
import { adalApiFetch } from "./config";
const API_SERVER = "example.azure.com/upload";

class FilUpload extends Component {
  constructor(props) {
    super(props);
  }

upload(e) {
 let data = new FormData();
 //Append files to form data
    let 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" });

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

export default FilUpload;

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