コンテンツアップローダー
コンテンツアップローダー
Box Content Uploader UI Elementを使用すると、開発者は、デスクトップまたはモバイルウェブアプリにアップロードウィジェットを埋め込むことができます。ユーザーはファイルを選択するかドラッグアンドドロップしてアップロードできます。サイズの大きなファイルのアップロードには、分割アップロードAPIを使用します。
インストール
NPMまたはBox CDN経由でBox UI Elementsをインストールする方法は、こちらを参照してください。
認証
UI Elementは認証に依存しない方法で設計されているため、Boxアカウントを持つユーザー (管理対象ユーザー) とBox以外のアカウントを持つユーザー (App User) のどちらにUI Elementを使用するかどうかに関係なく、UI Elementを使用するのに特別な設定は必要ありません。その理由は、UI Elementは認証のために「トークン」を受け取ることのみを予期しており、Boxにはトークンの生成方法としてOAuthとJWTの2つがあるからです。
認証方法の選択について確認する
デモ
Uploader
ポップアップ形式のアップローダー
API
const { ContentUploader } = Box;
const uploader = new ContentUploader();
/**
* Shows the content uploader.
*
* @public
* @param {String} folderId - Folder ID to upload to.
* @param {String} accessToken - Box API access token.
* @param {Object|void} [options] - Optional options.
* @return {void}
*/
uploader.show(folderId, accessToken, options);
/**
* Hides and clears HTML for the uploader.
*
* @public
* @return {void}
*/
uploader.hide();
/**
* Adds an event listener to the content uploader.
* Listeners should be added before calling show()
* so no events are missed.
*
* @public
* @param {String} eventName Name of the event.
* @param {Function} listener Callback function.
* @return {void}
*/
uploader.addListener(eventName, listener);
/**
* Removes an event listener from the content uploader.
*
* @public
* @param {String} eventName Name of the event.
* @param {Function} listener Callback function.
* @return {void}
*/
uploader.removeListener(eventName, listener);
/**
* Removes all event listeners from the content uploader.
*
* @public
* @return {void}
*/
uploader.removeAllListeners();
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
folderId | String | BoxフォルダのID。アップロードするファイルが含まれているフォルダのIDです。Boxの [すべてのファイル] フォルダを使用する場合は、folderId として0 を使用します。 |
accessToken | String | 使用するBox APIアクセストークン。このトークンには、上記のフォルダに対するアップロード権限が必要です。 |
options | Object | 省略可能なオプション。詳細については、以下を参照してください。 |
オプション
パラメータ | 型 | デフォルト | 説明 |
---|---|---|---|
container | String | document.body | コンテンツアップローダーが配置されるコンテナのCSSセレクタ。hide() を呼び出すと、このコンテナは空になります。 |
sharedLink | String | 共有リンクのURL。フォルダが共有されており、アクセストークンがファイルの所有者またはコラボレータに属していない場合は必須です。 | |
sharedLinkPassword | String | 共有リンクのパスワード。共有リンクにパスワードが設定されている場合は必須です。 | |
onClose | Function | アップロードするファイルがない場合やすべてのアップロードが完了している場合に表示される [閉じる] ボタンのコールバック関数。このオプションをnull に設定すると、このボタンは表示されません。 | |
modal | Object | ウィンドウ属性を指定すると、コンテンツアップローダーは所定の位置に作成されません。代わりに、コンテナ内にボタンが作成され、そのボタンをクリックすると、ウィンドウポップアップでコンテンツアップローダーが起動します。ウィンドウオプションについては、以下を参照してください。 | |
size | String | undefined | コンテンツアップローダーがコンテナの幅の大小に合わせて表示されるように示します。値には空白か、small またはlarge を指定できます。空白にした場合、UI Elementはそのコンテナに合わせて調整され、自動でsmallの幅とlargeの幅が切り替わります。 |
isTouch | Boolean | デフォルトでは、ブラウザとデバイスのデフォルトのタッチサポートが設定されます。 | コンテンツエクスプローラがタッチ対応デバイスにレンダリングされることを示します。 |
fileLimit | Number | 100 | 一度にアップロードできるファイルの最大数。fileLimit を超えるファイルをアップロードのために選択した場合、最初のfileLimit を超えるファイルはアップロードに含まれません。この状況が発生した場合、フッターに警告メッセージが表示されます。 |
requestInterceptor | Function | リクエストをインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリはaxios.js で、インターセプタでは同様のアプローチに従っています。 | |
responseInterceptor | Function | レスポンスをインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリはaxios.js で、インターセプタでは同様のアプローチに従っています。 |
ウィンドウオプション
パラメータ | 型 | デフォルト | 説明 |
---|---|---|---|
buttonLabel | String | ボタンのラベル | |
buttonClassName | String | Boxの青いボタン | ボタンを装飾するためのCSSクラス |
modalClassName | String | ウィンドウポップアップコンテンツを装飾する ためのCSSクラス | |
overlayClassName | String | ウィンドウポップアップオーバーレイを装飾するためのCSSクラス |
イベント
イベント名 | イベントデータ | 説明 |
---|---|---|
close | [閉じる] ボタンがクリックされたときに発生します。 | |
complete | Array<File> | 現在のビューにあるアップロードがすべて完了したときに発生します。イベントデータはファイルオブジェクトの配列になります。 |
upload | ファイル | 1つのファイルが正常にアップロードされたときに発生します。イベントデータはファイルオブジェクトになります。 |
error | Object | 1つのファイルでアップロードエラーが生じたときに発生します。イベントデータはFile Web APIのプロパティファイルとエラーオブジェクトのエラーを含むオブジェクトになります。 |
スコープ
アプリケーションで、エンドユーザーがコンテンツアップローダー機能のサブセットのみにアクセスできるようにする必要がある場合は、ダウンスコープを使用して、アクセストークンを適切にダウンスコープして必要な権限のセットを含むトークンを生成し、コンテンツアップロ ーダーを初期化するエンドユーザークライアントに安全に渡すことができます。
以下は、ダウンスコープと一緒に使用する、UI Element固有の新しいスコープのセットです。こうしたスコープにより、開発者は、ダウンスコープされたトークンに適切なスコープを構成して、コンテンツアップローダーのUIコントロールを有効/無効にすることができます。詳細については、Box UI Elementsの専用スコープを参照してください。
基本スコープ
スコープ名 | 付与される権限 |
---|---|
base_upload | トークン交換リクエストの「resource」で指定されたフォルダへのアップロードを許可します。 |
サンプルのシナリオ
シナリオ | スコープ |
---|---|
ユーザーがファイルをBoxフォルダにアップロードする | base_upload |