使用 Microsoft 文件浏览器 SDK 选择文件
下面的演练演示如何将 Microsoft 文件浏览器SDK与项目设置React应用程序的示例集成。
处理文件选择
1. 附加 onSuccess 回调
组件 GraphFileBrowser 公开以下操作回调属性 onSuccess 和 onCancel 。
当用户 onSuccess 通过默认"选择"操作按钮选择文件时,将调用回调。
onSuccess 回调
回调 onSuccess 属性需要一个函数,该函数接收在文件浏览器中选择的项的键数组。
下面是将所选文件密钥记录到浏览器控制台的 属性 onSuccess 的示例实现:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
class App extends React.Component {
public render() {
return (
<GraphFileBrowser
getAuthenticationToken={this.getAuthenticationToken}
onSuccess={this.onSuccess} />
);
}
private getAuthenticationToken() {
return Promise.resolve('<access_token>');
}
private onSuccess(keys) {
console.log('onSuccess', keys);
}
}
ReactDOM.render(
<App />,
mountNode
);
若要在文件 onSuccess 浏览器中调用回调,请在呈现后单击"选择"操作按钮。
任何选定文件的密钥都将记录到浏览器的控制台。
onSuccess 有效负载
调用回调时,会向它传递一个参数,该参数是所选 onSuccess 项目的键的 Array。
每个键具有以下结构:
{
// the key of the item in the File Browser's internal cache
[key: string]: {
endpoint: string, // the endpoint url the item was fetched from
driveId?: string, // the identifier of the drive that contains the item
itemId?: string // the identifier of the item
}
}
使用上述信息和有效 ,可以使用 Microsoft Graph access_token API 对文件操作。
2. 附加 onCancel 回调
当用户通过默认"取消"操作按钮取消选择操作时,将 onCancel 调用回调。
onCancel 回调
callback 属性需要一个函数,该函数在选择默认"取消"操作按钮时接收 作为其 onCancel Error 唯一的参数。
基于上一个示例,属性的一个示例 onCancel 实现是:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
class App extends React.Component {
public render() {
return (
<GraphFileBrowser
getAuthenticationToken={this.getAuthenticationToken}
onSuccess={this.onSuccess}
onCancel={this.onCancel} />
);
}
private getAuthenticationToken() {
return Promise.resolve('<access_token>');
}
private onSuccess(keys) {
console.log('onSuccess', keys);
}
private onCancel(err) {
console.log('onCancel', err.message);
}
}
ReactDOM.render(
<App />,
mountNode
);
若要调用 onCancel 回调,请单击"取消"操作按钮。
Error然后,包含已取消的用户消息的 将输出到浏览器的控制台。
高级配置
组件 GraphFileBrowser 接受属性以支持其他高级方案。
属性定义如下:
| Component Prop | 说明 |
|---|---|
| getAuthenticationToken | 具有返回 类型的必需函数 Promise<string> ,其中包含针对提供的 access_token 身份验证的有效 endpoint 函数。 |
| onSuccess | 在一个或多个文件的"选择"上调用 (keys: any[]) => void 签名的回调。 |
| onCancel | 在"取消"或引发错误时调用签名 (err: Error) => void 的回调。 |
| onRenderSuccessButton | 可选的 render 函数用于替代默认的"选择"操作按钮。 |
| onRenderCancelButton | 可选的 render 函数用于替代默认的"取消"操作按钮。 |
| itemMode | 文件浏览器的项目选择模式,其中值是 、 或 或 (files folders all 默认值) 。 的模式将用户选择限制为文件类型,将选择范围限制为文件夹,并允许同时选择 files folders all 文件和文件夹。 |
| selectionMode | 文件浏览器的选择行为模式,其中值是 、 或 或 (pick single multiple 默认值) 。 的 允许一次仅选择一个项目,而 允许选择 itemMode single multiple 任意数目的项目。 对 itemMode pick 项目"click"(而不是在按下"选择"操作按钮时)调用的 onSelect 。 |
| endpoint | 默认情况下,文件浏览器会从 位于 的 Microsoft Graph提取项目 https://graph.microsoft.com/v1.0/me 。 您可以指定一个有效的OneDrive for Business或SharePoint库 URL 来替代默认终结点。 |
| itemId | 默认情况下,文件浏览器将打开到 root 驱动器。 通过指定驱动器的唯一标识符,你可以选择在呈现时打开其他驱动器。 |
后续步骤
下一部分将介绍 自定义文件浏览器。