---
title: フロントエンドからファイルをアップロードしてコンテンツに関連づけるにはどうしたらよいですか？
description: フロントエンドからあるコンテンツの内容に画像などファイルを紐づけたい場合、Kurocoでは以下の3つの手順を実行してください。
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "フロントエンドからファイルをアップロードしてコンテンツに関連づけるにはどうしたらよいですか？", answer: "フロントエンドからあるコンテンツの内容に画像などファイルを紐づけたい場合、Kurocoでは以下の3つの手順を実行してください。" }
]} />

フロントエンドからあるコンテンツの内容に画像などファイルを紐づけたい場合、Kurocoでは以下の3つの手順を実行してください。

- コンテンツ定義作成（フィールドにファイル関連を追加）
- エンドポイント作成
- フロントエンド作成

## コンテンツ定義作成
対象のコンテンツの拡張項目を作成し、`ファイル（KurocoFilesにアップロード）`を設定してください。

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

## エンドポイント作成
下記APIエンドポイントを設定してください。

- カテゴリ：ファイル
- モデル：Files
- オペレーション：upload

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/5e11c65fa2defaf8f6e95b23e6a153ca.png)
## フロントエンド作成
アップロード用のエンドポイントにファイルを送信し、レスポンスされてきたIDをコンテンツ更新リクエストに適用してください。
ファイル送信時のリクエストヘッダには`'Content-Type': 'multipart/form-data'`を指定してください。

```js
{
    headers: {
        'Content-Type': 'multipart/form-data',
    },
}
```

詳細なファイルのアップロード方法は、[KurocoとNuxt.jsで、フォーム画面を構築する -> ファイルの入力項目を追加する](/ja/docs/tutorials/setting-up-inquiry-forms/#ファイルの入力項目を追加する) をご参考ください。

## 関連ドキュメント
- [APIを使ったファイルのアップロードについて](/ja/docs/reference/uploading-files-using-the-api/)
- [コンテンツのbulk_upsert APIで画像・ファイル項目の更新はできますか？](/ja/docs/faq/can-i-update-topics-files-using-bulk_upsert-api/)