How do i use the MS graph api in react?

Question

I'm completely new to JS and React and im trying to upload a file with my MS custom teams app.

I've found the information i need to make it work, i just dont understand how i can use it within my teams tab.

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount() {
    new Promise((resolve) => {
      microsoftTeams.getContext(resolve);
    })
      .then((context) => {
        this.setState({ context });
        //var inputs {}
        const queryParameters = new URLSearchParams({ function: "getDocuments", input: '"'+ context.userPrincipalName + '"',});
        console.log(`userPrincipalName is '${context.Id}'`);
        console.log(`teamName is '${context.teamName}'`);
        console.log(`http://localhost/openims/json.php?${queryParameters}`);
        return fetch(`http://localhost/openims/json.php?${queryParameters}`);
      })
      .then((res) => res.json())
      .then((result) => this.setState({ ...result }))
      .catch((error) => this.setState({ error }))
      .finally(() => this.setState({ isLoaded: true }));
  }
  
  render() {  
    const { error, isLoaded, name, age, city } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (     
        <ul>
          <li>
            {/* <a href="http://google.com" target="_blank" rel="noopener noreferrer">Your Link</a> */}
            {name} {age} {city}
          </li>
        </ul>       
      );
    }
  }

}
export default Tab;

Currently im using a componentDidMount to fetch some info i need from a URL, but now i need to figure out how i add another componentDidMount(i think) to do a PUT and upload a file to my drive location. Preferably the drive location of my MS teams team onedrive.

So somewhere i have to put this:

PUT /me/drive/root:/FolderA/FileB.txt:/content
Content-Type: text/plain

The contents of the file goes here.

So i can actually upload a file. How do i go about this?

Answer 1

You can not add multiple componentDidMount() methods however in success callback you can call another API to upload the file. Or you can call after promise in same componentDidMount() method.

Also you can write your code like below:

fetch('https://me/drive/root:/FolderA/FileB.txt:/', {
  method: 'PUT',
  body: fileContent
})
.then((response) => response.json())
.then((result) => {
  console.log('Success:', result);
})
.catch((error) => {
  console.error('Error:', error);
});

You can refer below documentation: https://learn.microsoft.com/en-us/graph/api/driveitem-put-content?view=graph-rest-1.0&tabs=http#example-upload-a-new-file

Similar issue reference URL: How do I upload a file with the JS fetch API?