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
上記のデモは、有効なアクセストークンを指定しなければ、完全に動作しない可能性があります。テスト目的の場合は、一時的な開発者トークンを使用できます。このトークンは、デモにある[JS]タブで更新する必要があります。
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 selector of the container in which the content uploader should be placed. Calling hide()
will clear out this container. sharedLink
String 共有リンクのURL。フォルダが共有されており、アクセストークンがファイルの所有者またはコラボレータに属していない場合は必須です。 sharedLinkPassword
String 共有リンクのパスワード。共有リンクにパスワードが設定されている場合は必須です。 onClose
Function アップロードするファイルがない場合やすべてのアップロードが完了している場合に表示される[閉じる]ボタンのコールバック関数。このオプションが定義されていない場合、ボタンは表示されません。 modal
Object モーダル属性を指定すると、Content Uploaderは所定の位置に作成されません。代わりに、コンテナ内にボタンが作成され、そのボタンをクリックすると、モーダルポップアップでContent Uploaderが起動します。モーダルオプションについては、以下を参照してください。 size
String undefined
Indicates 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. isTouch
Boolean デフォルトでは、ブラウザとデバイスのデフォルトのタッチサポートが設定されます。 Content Explorerがタッチ対応デバイスにレンダリングされることを示します。 fileLimit
Number 100 一度にアップロードできるファイルの最大数。fileLimit
を超えるファイルをアップロードのために選択した場合、最初のfileLimit
を超えるファイルはアップロードに含まれません。この状況が発生した場合、フッターに警告メッセージが表示されます。 requestInterceptor
Function リクエストをインターセプトする関数。例については、このCodePen を参照してください。基盤となるXHRライブラリはaxios.js
で、インターセプタでは同様のアプローチ に従っています。 responseInterceptor
Function 応答をインターセプトする関数。例については、このCodePen を参照してください。基盤となるXHRライブラリはaxios.js
で、インターセプタでは同様のアプローチ に従っています。
パラメータ 型 デフォルト 説明 buttonLabel
String
Label for the button buttonClassName
String
Box Blue Button ボタンを装飾するためのCSSクラス modalClassName
String
CSS class to decorate the modal popup content overlayClassName
String
CSS class to decorate the modal popup overlay
イベント名 イベントデータ 説明 close
Will be fired when 'Close' button is clicked. complete
Array<File>
Will be fired when all uploads in the current view are complete. Event data will be an array of File Object. upload
ファイル 1つのファイルが正常にアップロードされたときに発生します。イベントデータはファイルオブジェクトになります。 error
Object 1つのファイルでアップロードエラーが生じたときに発生します。イベントデータはFile Web APIのプロパティファイルとエラーオブジェクトのエラーを含むオブジェクトになります。
アプリケーションで、エンドユーザーがContent Explorer機能のサブセットのみにアクセスできるようにする必要がある場合は、ダウンスコープ を使用して、アクセストークンを適切にダウンスコープして必要な権限のセットを含むトークンを生成し、Content Explorerを初期化するエンドユーザークライアントに安全に渡すことができます。
以下は、ダウンスコープと一緒に使用する、UI Element固有の新しいスコープのセットです。こうしたスコープにより、開発者は、ダウンスコープされたトークンに適切なスコープを構成して、Content ExplorerのUIコントロールを有効/無効にすることができます。詳細については、Box UI Elementsの専用スコープ を参照してください。
スコープ名 付与される権限 base_upload
Allows upload into the folder specific under "resource" of the Token Exchange request.
シナリオ スコープ ユーザーがファイルをBoxフォルダにアップロードする base_upload