@microsoft/file-browser

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

The @microsoft/file-browser library provides a reusable React component for building file experiences with the Microsoft Graph API.

Installation

The @microsoft/file-browser package has several peer dependencies that the library relies on. The bundle requires its consumers to provide react and react-dom. If you are using TypeScript, the package also relies on typings for React and office-ui-fabric-react. (The office-ui-fabric-react components themselves are included in the bundle.)

Here is an example package.json excerpt showing the dependency on @microsoft/file-browser with appropriate peer dependencies:

  "dependencies": {
    "@microsoft/file-browser": "~1.0.0-preview.0",
    "office-ui-fabric-react": "^5.123.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
  },
  "devDependencies": {
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7"
  }

Usage

In your React app, render the component by importing the GraphFileBrowser component from @microsoft/file-browser and providing a getAuthenticationToken prop. The getAuthenticationToken prop expects a function that returns a resolved Promise with a valid Microsoft Graph access token. Additional information on retrieving valid access tokens can be found within this tutorial.

The example below also provides function props for onSuccess and onCancel. The onSuccess callback is invoked upon valid selection of items within the File Browser. The onCancel callback is invoked when the User cancels a selection or an error is thrown.

import * as React from "react";
import * as ReactDOM from "react-dom";

import { GraphFileBrowser } from '@microsoft/file-browser';

class App extends React.Component {
  getAuthenticationToken() {
    return new Promise(resolve => {
      resolve(
        "<access_token>"
      );
    });
  }

  render() {
    return (
      <GraphFileBrowser
        getAuthenticationToken={this.getAuthenticationToken}
        onSuccess={(selectedKeys: any[]) => console.log(selectedKeys)}
        onCancel={(err: Error) => console.log(err.message)}
      />
    );
  }
}

ReactDOM.render(
  <App />,
  mountNode
);

This package is part of the SharePoint Framework, which is a collection of NPM packages that empower developers to create client-side experiences for Microsoft SharePoint. For more information, including complete API documentation and code samples, please visit the SharePoint Framework web site.