コンテンツアップローダー

ガイド Boxの埋め込み UI Element コンテンツアップローダー

コンテンツアップローダー

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

ポップアップ形式のアップローダー

アクセストークン

上記のデモは、有効なアクセストークンを指定しなければ、完全に動作しない可能性があります。テスト目的の場合は、一時的な開発者トークンを使用できます。このトークンは、デモにある [JS] タブで更新する必要があります。

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();

パラメータ

パラメータ説明
folderIdStringBoxフォルダのID。アップロードするファイルが含まれているフォルダのIDです。Boxの [すべてのファイル] フォルダを使用する場合は、folderIdとして0を使用します。
accessTokenString使用するBox APIアクセストークン。このトークンには、上記のフォルダに対するアップロード権限が必要です。
optionsObject省略可能なオプション。詳細については、以下を参照してください。

オプション

パラメータデフォルト説明
containerStringdocument.bodyコンテンツアップローダーが配置されるコンテナのCSSセレクタ。hide()を呼び出すと、このコンテナは空になります。
sharedLinkString共有リンクのURL。フォルダが共有されており、アクセストークンがファイルの所有者またはコラボレータに属していない場合は必須です。
sharedLinkPasswordString共有リンクのパスワード。共有リンクにパスワードが設定されている場合は必須です。
onCloseFunctionアップロードするファイルがない場合やすべてのアップロードが完了している場合に表示される [閉じる] ボタンのコールバック関数。このオプションをnullに設定すると、このボタンは表示されません。
modalObjectモーダル属性を指定すると、コンテンツアップローダーは所定の位置に作成されません。代わりに、コンテナ内にボタンが作成され、そのボタンをクリックすると、モーダルポップアップでコンテンツアップローダーが起動します。モーダルオプションについては、以下を参照してください。
sizeStringundefinedコンテンツアップローダーがコンテナの幅の大小に合わせて表示されるように示します。値には空白か、smallまたはlargeを指定できます。空白にした場合、UI Elementはそのコンテナに合わせて調整され、自動でsmallの幅とlargeの幅が切り替わります。
isTouchBooleanデフォルトでは、ブラウザとデバイスのデフォルトのタッチサポートが設定されます。コンテンツエクスプローラがタッチ対応デバイスにレンダリングされることを示します。
fileLimitNumber100一度にアップロードできるファイルの最大数。fileLimitを超えるファイルをアップロードのために選択した場合、最初のfileLimitを超えるファイルはアップロードに含まれません。この状況が発生した場合、フッターに警告メッセージが表示されます。
requestInterceptorFunctionリクエストをインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリはaxios.jsで、インターセプタでは同様のアプローチに従っています。
responseInterceptorFunctionレスポンスをインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリはaxios.jsで、インターセプタでは同様のアプローチに従っています。

モーダルオプション

パラメータデフォルト説明
buttonLabelStringボタンのラベル
buttonClassNameStringBoxの青いボタンボタンを装飾するためのCSSクラス
modalClassNameStringモーダルポップアップコンテンツを装飾するためのCSSクラス
overlayClassNameStringモーダルポップアップオーバーレイを装飾するためのCSSクラス

イベント

イベント名イベントデータ説明
close[閉じる] ボタンがクリックされたときに発生します。
completeArray<File>現在のビューにあるアップロードがすべて完了したときに発生します。イベントデータはファイルオブジェクトの配列になります。
uploadファイル1つのファイルが正常にアップロードされたときに発生します。イベントデータはファイルオブジェクトになります。
errorObject1つのファイルでアップロードエラーが生じたときに発生します。イベントデータはFile Web APIのプロパティファイルとエラーオブジェクトのエラーを含むオブジェクトになります。

スコープ

アプリケーションで、エンドユーザーがコンテンツアップローダー機能のサブセットのみにアクセスできるようにする必要がある場合は、ダウンスコープを使用して、アクセストークンを適切にダウンスコープして必要な権限のセットを含むトークンを生成し、コンテンツアップローダーを初期化するエンドユーザークライアントに安全に渡すことができます。

以下は、ダウンスコープと一緒に使用する、UI Element固有の新しいスコープのセットです。こうしたスコープにより、開発者は、ダウンスコープされたトークンに適切なスコープを構成して、コンテンツアップローダーのUIコントロールを有効/無効にすることができます。詳細については、Box UI Elementsの専用スコープを参照してください。

基本スコープ

スコープ名付与される権限
base_uploadトークン交換リクエストの「resource」で指定されたフォルダへのアップロードを許可します。

サンプルのシナリオ

シナリオスコープ
ユーザーがファイルをBoxフォルダにアップロードするbase_upload