Content Uploader

Content Uploader

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

インストール

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

ブラウザのサポート

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

認証

UI Elementsは認証に依存しない方法で設計されているため、Boxアカウントを持つユーザー(管理対象ユーザー)とBox以外のアカウントを持つユーザー(App User)のどちらにUI Elementsを使用するかどうかに関係なく、UI Elementsを使用するのに特別な設定は必要ありません。その理由は、UI Elementsは認証のために「トークン」を受け取ることのみを予期しており、Boxにはトークンの生成方法としてOAuthとJWTの2つがあるからです。

Learn about selecting an authentication method

デモ

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.bodyCSS selector of the container in which the content uploader should be placed. Calling hide() will clear out this container.
sharedLinkString共有リンクのURL。フォルダが共有されており、アクセストークンがファイルの所有者またはコラボレータに属していない場合は必須です。
sharedLinkPasswordString共有リンクのパスワード。共有リンクにパスワードが設定されている場合は必須です。
onCloseFunctionアップロードするファイルがない場合やすべてのアップロードが完了している場合に表示される[閉じる]ボタンのコールバック関数。このオプションが定義されていない場合、ボタンは表示されません。
modalObjectモーダル属性を指定すると、Content Uploaderは所定の位置に作成されません。代わりに、コンテナ内にボタンが作成され、そのボタンをクリックすると、モーダルポップアップでContent Uploaderが起動します。モーダルオプションについては、以下を参照してください。
sizeStringundefinedIndicates to the content uploader to fit within a small or large width container. Value can be absent or one of small or large. If absent the UI Element will adapt to its container and automatically switch between small width or large width mode.
isTouchBooleanデフォルトでは、ブラウザとデバイスのデフォルトのタッチサポートが設定されます。Content Explorerがタッチ対応デバイスにレンダリングされることを示します。
fileLimitNumber100一度にアップロードできるファイルの最大数。fileLimitを超えるファイルをアップロードのために選択した場合、最初のfileLimitを超えるファイルはアップロードに含まれません。この状況が発生した場合、フッターに警告メッセージが表示されます。
requestInterceptorFunctionリクエストをインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリはaxios.jsで、インターセプタでは同様のアプローチに従っています。
responseInterceptorFunction応答をインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリはaxios.jsで、インターセプタでは同様のアプローチに従っています。

モーダルオプション

パラメータデフォルト説明
buttonLabelStringLabel for the button
buttonClassNameStringBox Blue Buttonボタンを装飾するためのCSSクラス
modalClassNameStringCSS class to decorate the modal popup content
overlayClassNameStringCSS class to decorate the modal popup overlay

イベント

イベント名イベントデータ説明
closeWill be fired when 'Close' button is clicked.
completeArray<File>Will be fired when all uploads in the current view are complete. Event data will be an array of File Object.
uploadファイル1つのファイルが正常にアップロードされたときに発生します。イベントデータはファイルオブジェクトになります。
errorObject1つのファイルでアップロードエラーが生じたときに発生します。イベントデータはFile Web APIのプロパティファイルとエラーオブジェクトのエラーを含むオブジェクトになります。

スコープ

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

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

基本スコープ

スコープ名付与される権限
base_uploadAllows upload into the folder specific under "resource" of the Token Exchange request.

サンプルのシナリオ

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