# 画像をS3, GCSにアップロード

AmazonやGoogleのクラウドストレージに画像ファイルをアップロードするには、Dashcombが提供する[UIコンポーネント](/dashcomb-help-center/ide/ui-component.md)を使えば簡単に実現できます。

## 準備

* Dashcomb以外のところでDashcombがサポートしているクラウドストレージを用意します。
* このCloud Storageの連携先になる管理画面を作成しておきます。

## 実現

* [画面にCloud Storageの追加](/dashcomb-help-center/tips-and-tricks/add-a-cloud-storage.md)に沿って、管理画面にS3やGCSのCloud Storageを追加します。
* その「アクション」に「アップロード用署名URL」を選びます。
* 「バケット」、「キー」、「有効期間」などを入力します。
* 「成功時」、「失敗時」の「アクション」や「通知」を設定します。
  * 設定方法の詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参考ください。
  * ここでは全て初期の「アクション無し」を選びます。
* 「保存」ボタンを押すと、アップロード用のCloud Storageの作成ができました。
* 管理画面に[Uploader](/dashcomb-help-center/ide/ui-component/uploader.md)をドラッグ＆ドロップします。
  * 例えば、オブジェクト名は `upload1` とします。
* 該当[Uploader](/dashcomb-help-center/ide/ui-component/uploader.md)の[プロパティ領域](/dashcomb-help-center/ide/property-region.md)を開きます。
* 「データ」の「ストレージ」に先ほど作成したCloud Storageを選びます。
* 管理画面に[Image](/dashcomb-help-center/ide/ui-component/image.md)をドラッグ＆ドロップします。
* 該当[Image](/dashcomb-help-center/ide/ui-component/image.md)の[プロパティ領域](/dashcomb-help-center/ide/property-region.md)を開きます。
* 「データ」の「画像URL」に `{{upload1.value}}` を入力します。
* 「保存」ボタンを押すと、画像アップロード機能が完成です。

## 参照項目

* [クラウドストレージへの接続](/dashcomb-help-center/ide/others/dtassu/cloud-storage.md)
* [画面にCloud Storageの追加](/dashcomb-help-center/tips-and-tricks/add-a-cloud-storage.md)
* [Uploaderの使い方](/dashcomb-help-center/ide/ui-component/uploader.md)
* [Imageの使い方](/dashcomb-help-center/ide/ui-component/image.md)
* [簡単なCDNのファイル管理](/dashcomb-help-center/tips-and-tricks/quick-cdn-file-explorer.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/upload-to-s3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.