使用 Microsoft 文件浏览器 SDK 选择文件

下面的演练演示如何将 Microsoft 文件浏览器SDK与项目设置React应用程序的示例集成

处理文件选择

1. 附加 onSuccess 回调

组件 GraphFileBrowser 公开以下操作回调属性 onSuccessonCancel 。 当用户 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 驱动器。 通过指定驱动器的唯一标识符,你可以选择在呈现时打开其他驱动器。

后续步骤

下一部分将介绍 自定义文件浏览器