> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

<RelatedLinks
  title="必須のガイド"
  items={[
{ label: translate("Installation"), href: "/guides/embed/ui-elements/installation", badge: "GUIDE" }
]}
/>

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

## インストール

NPMまたはBox CDN経由でBox UI Elementsをインストールする方法は、<Link href="/guides/embed/ui-elements/installation">こちら</Link>を参照してください。

## 認証

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

<Card href={localizeLink("/guides/authentication/select")} arrow title="認証方法の選択について確認する" />

## デモ

### アップローダー

<iframe height="560" scrolling="no" title="Box Content Uploader" src="//codepen.io/box-platform/embed/QvqGwr/?height=560&theme-id=27216&default-tab=result&embed-version=2&editable=true" frameborder="no" allowtransparency="true" allowfullscreen="true" style={{width: "100%"}} />

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

<iframe height="560" scrolling="no" title="ポップアップ形式のBox File Pickerとアップローダー" src="//codepen.io/box-platform/embed/oWEKdq/?height=560&theme-id=27216&default-tab=result&embed-version=2&editable=true" frameborder="no" allowtransparency="true" allowfullscreen="true" style={{width: "100%"}} />

<Info>
  **アクセストークン**

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

## API

```js theme={null}
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`           | 数字       | 100                                     | 一度にアップロードできるファイルの最大数。`fileLimit`を超えるファイルをアップロードのために選択した場合、最初の`fileLimit`を超えるファイルはアップロードに含まれません。この状況が発生した場合、フッターに警告メッセージが表示されます。                                                                                                |
| `requestInterceptor`  | Function |                                         | リクエストをインターセプトする関数。例については、<Link href="https://codepen.io/box-platform/pen/jLdxEv">このCodePen</Link>を参照してください。基盤となるXHRライブラリは`axios.js`で、<Link href="https://github.com/axios/axios#interceptors">インターセプタでは同様のアプローチ</Link>に従っています。 |
| `responseInterceptor` | Function |                                         | レスポンスをインターセプトする関数。例については、<Link href="https://codepen.io/box-platform/pen/jLdxEv">このCodePen</Link>を参照してください。基盤となるXHRライブラリは`axios.js`で、<Link href="https://github.com/axios/axios#interceptors">インターセプタでは同様のアプローチ</Link>に従っています。 |

### ウィンドウオプション

| パラメータ              | 型        | デフォルト     | 説明                              |
| ------------------ | -------- | --------- | ------------------------------- |
| `buttonLabel`      | `String` |           | ボタンのラベル                         |
| `buttonClassName`  | `String` | Boxの青いボタン | ボタンを装飾するためのCSSクラス               |
| `modalClassName`   | `String` |           | ウィンドウポップアップコンテンツを装飾するためのCSSクラス  |
| `overlayClassName` | `String` |           | ウィンドウポップアップオーバーレイを装飾するためのCSSクラス |

### イベント

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

## スコープ

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

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

### 基本スコープ

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

### サンプルのシナリオ

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

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("UI Elements"), href: "/guides/embed/ui-elements/index", badge: "GUIDE" }
]}
/>