@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.