> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/upload-to-s3.md).

# 画像を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)