Content Uploader

Content Uploader

Box Content Uploader UI Elementを使用すると、開発者は、デスクトップまたはモバイルウェブアプリにアップロードウィジェットを埋め込むことができます。ユーザーはファイルを選択するかドラッグアンドドロップしてアップロードできます。サイズの大きなファイルのアップロードには、分割アップロードAPIを使用します。

インストール

NPMまたはBox CDN経由でBox UI Elementsをインストールする方法は、こちらを参照してください。

ブラウザのサポート

古いブラウザでは、UI Elementのサポートは限定的です。目的のブラウザに合ったpolyfillを必ず追加してください。

認証

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.bodyContent Uploaderが配置されるコンテナのCSSセレクタ。hide()を呼び出すと、このコンテナは空になります。
sharedLinkString共有リンクのURL。フォルダが共有されており、アクセストークンがファイルの所有者またはコラボレータに属していない場合は必須です。
sharedLinkPasswordString共有リンクのパスワード。共有リンクにパスワードが設定されている場合は必須です。
onCloseFunctionアップロードするファイルがない場合やすべてのアップロードが完了している場合に表示される[閉じる]ボタンのコールバック関数。このオプションが定義されていない場合、ボタンは表示されません。
modalObjectモーダル属性を指定すると、Content Uploaderは所定の位置に作成されません。代わりに、コンテナ内にボタンが作成され、そのボタンをクリックすると、モーダルポップアップでContent Uploaderが起動します。モーダルオプションについては、以下を参照してください。
sizeStringundefinedContent Uploaderがコンテナの幅の大小に合わせて表示されるように示します。値には空白か、smallまたはlargeを指定できます。空白にした場合、UI Elementはそのコンテナに合わせて調整され、自動でsmallの幅とlargeの幅が切り替わります。
isTouchBooleanデフォルトでは、ブラウザとデバイスのデフォルトのタッチサポートが設定されます。Content Explorerがタッチ対応デバイスにレンダリングされることを示します。
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のプロパティファイルとエラーオブジェクトのエラーを含むオブジェクトになります。

スコープ

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

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

基本スコープ

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

サンプルのシナリオ

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