---
title: APIを使ったファイルのアップロードについて
category: API
description: コンテンツ、フォーム、メンバーなどにAPIを利用してファイルをアップロードする場合、Files::uploadのエンドポイントを利用して、ファイルをKurocoの仮領域にアップロードし、応答として返されるfile_idを各エンドポイントにPOSTしてコンテンツを更新します。
---

## 概要
コンテンツ、フォーム、メンバーなどにAPIを利用してファイルをアップロードする場合、`Files::upload`のエンドポイントを利用して、ファイルをKurocoの一時領域にアップロードし、応答として返される`file_id`を各エンドポイントにPOSTしてコンテンツを更新します。

SwaggerUIで動作の確認をすると、以下の手順になります。

## 手順
### 画像(KurocoFilesにアップロード)
画像(KurocoFilesにアップロード)(コンテンツ)や、アップロードファイル(メンバー)の場合は以下のように`Files::upload`で取得した`file_id`をエンドポイントにPOSTします。

1. Files::uploadのエンドポイントにファイルをアップロードする。  
  `Files::upload`のエンドポイントを開くと、[ファイルを選択]のボタンが表示されるので、アップロードするファイルを選択します。  

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/4bc477a16c196a73f921f38a1f66eeb6.png)

  :::tip
  ファイル送信時のリクエストヘッダには'Content-Type': 'multipart/form-data'を指定します。
  :::

2. レスポンスから`file_id`を確認する  
  ファイルの一時領域へのアップロードが成功すると、`file_id`を含むレスポンスが表示されます。  

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/5abfaf930bc6a331be7c0d7ef99083ca.png)

3. `file_id`をコンテンツを更新するエンドポイントにPOSTする  
  更新・追加したいコンテンツを操作するエンドポイントに対して、`file_id`を指定してリクエストを送ります。   

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/dfea1d5badaf69fdb605de19702bcdd9.png)

4. リクエストが成功したことを確認する  
  レスポンスとコンテンツを確認します。

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/392768bb3b877d18b0fd9460152a40ad.jpg)


フロントエンドでの具体的なコードの例は関連ドキュメントを参照してください。

### WYSIWYG

WYSIWYGの拡張項目の場合は`Files::upload`で取得した`file_id`をHTMLの`src`属性に指定すると、画像がファイルマネージャーの`/files/user/topics_img/`配下のディレクトリに保存されて更新されます。

1. Files::uploadのエンドポイントにファイルをアップロードする。  
  `Files::upload`のエンドポイントを開くと、[ファイルを選択]のボタンが表示されるので、アップロードするファイルを選択します。  

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/4bc477a16c196a73f921f38a1f66eeb6.png)

2. レスポンスから`file_id`を確認する  
  ファイルの一時領域へのアップロードが成功すると、`file_id`を含むレスポンスが表示されます。  

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/f99b6e0c79647c928fee6e4132482274.png)

3. HTML要素の`src`属性に一時パスを入力したHTMLを準備する

  `<img src=\"INPUT_TEMPORARY_PATH_HERE\">`のように`src`属性に`Files::upload`のエンドポイントから取得した`file_id`を指定したHTMLを準備します。  
  次のようになります。
  ```
  <figure class=\"image\"><img style=\"aspect-ratio:2000/1334;\" src=\"files/temp/75a0d4626ac4bab6d4ec6f8969233fd493db2f7093b67cf92a782f8814e37530.png\" width=\"2000\" height=\"1334\"></figure>
  ```

  :::tip
  HTMLに含まれる`"`は`\`でエスケープしてください。
  :::

4. `src`属性に`file_id`を含むHTMLをエンドポイントにPOSTする  
  更新・追加したいコンテンツを操作するエンドポイントに対して、`src`属性に`file_id`を含むHTMLをPOSTします。   

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/3105068b3e7ae098e57b27fe6766ecd9.png)

5. リクエストが成功したことを確認する  
  レスポンスとコンテンツを確認します。

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/8a4b664d3577f40e2c3af6e81da5dcb1.png)

  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/8623013b6775dc9d29c0a01adc918814.png)

仕様:
- HTML要素には`src`属性が含まれている必要があります。
- アップロードストレージにはKurocoFiles、S3、GCSが利用可能です。
- WYSIWYGへのAPIを使ったファイルアップロードは画像ファイル(`jpeg`,`jpg`,`gif`,`png`,`bmp`,`webp`,`avif`,`svg`)のみが許可されています。
- 一度のリクエストで複数の一時ファイルパスを使用することが可能です。
- 一度のリクエストで同じ一時ファイルパスを複数回使用することが可能です。例えば、以下のようにリクエストすると、WYSIWYGの項目に同じ画像が2つ追加されます。
  ```
  `<figure class=\"image1\"><img src=\"TEMPORARY_PATH\"></figure><figure class=\"image2\"><img src=\"TEMPORARY_PATH\"></figure>`
  ```
- 複数のAPIリクエストで同じ一時ファイルパスを使用することが可能です。
- WYSIWYIGへのAPIを利用した画像アップロードは追加項目の名称が`ext_x`のサイトで動作します。追加項目の名称が`ext_col_x`のサイトでは動作しません。


## 関連ドキュメント
- [KurocoとNuxt.jsで、フォーム画面を構築する](/ja/docs/tutorials/setting-up-inquiry-forms/#ファイルの入力項目を追加する)
- [フロントエンドからファイルをアップロードしてコンテンツに関連づけるにはどうしたらよいですか？](/ja/docs/faq/how-do-i-upload-image-and-manage-it/)
- [コンテンツのbulk_upsert APIで画像・ファイル項目の更新はできますか？](/ja/docs/faq/can-i-update-topics-files-using-bulk_upsert-api/)