# Uploader UploadファイルのURLの表示は `{{upload名.value}}` で取得できます。 画像ファイルをアップロードする場合、Dashcombが提供しているImageコンポーネントとセットで使うことも可能です。IDE画面では取得した値をImageコンポーネントの画像URLに `{{upload名.value}}` を設定しておくことで、アップロードした画像はリアルタイムでImageエリアに表示されます。 ## プロパティ Uploaderコンポーネントには、以下のプロパティが含まれています。
### 共通 **オブジェクト** アップローダーオブジェクトの変数名です。Uploaderコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `upload1`、`upload2`... と名付けられます。 ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。 （例）`{{upload1.value}}` で `upload1` の値を取得することができます。 利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。 #### 非表示 トグルスイッチをONにすると、アップローダーが非表示になります。 #### 無効 トグルスイッチをONにすると、アップローダーが無効になり、入力できなくなります。 ### データ **ラベル文字** アップローダーのラベルテキストです。Uploader コンポーネントをドラッグ＆ドロップすると、自動的に `Uploader` に設定されます。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 {% hint style="info" %} `{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。 {% endhint %} #### 提示語 アップローダーのプレースホルダーです。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 **パス** ファイル格納先のフォルダパスです。ファイルのインターネットでの相対パスで、英数字のみ使用可能です。設定していない場合、格納先はCloud Storageのルートパスとなります。 **ストレージ** アップロード用に事前に作成されたCloud Storage です。ストレージ指定なしでのファイルアップロードはできません。 また、同じストレージにアップロードした同名ファイルは上書きされます。 {% hint style="info" %} Cloud Storage の設定方法については、[クラウドストレージ](/dashcomb-help-center/ide/query-region/kuraudosutorji.md) のページを参照してください。 {% endhint %} **自動リネーム** Hashリネームのスイッチです。トグルスイッチをONにすると、ファイル名をハッシュ値にリネームします。 **ドメイン置換え** `bucket名.s3.amazonaws.com` のようなドメインを、各自のドメイン `cnd.example.com` に置き換えます。設定していない場合、ファイルのドメインは事前に作成されたCloud StorageのBucket名となります。 ### アクション Uploader コンポーネントのアクションは、以下を設定することができます。 #### **onChange** アップローダーのonChange イベントの発生時（Uploaderの入力内容が変更された時）に、指定アクションを実行できます。 ### 外観 **高さ** アップロードエリアの高さを指定します。初期設定では2行に設定されており、最小設定は1行です。 #### **ラベル表示** アップローダーのラベルテキストの表示・非表示を切り替えます。 トグルスイッチをOFFにすると、アップローダーにラベルが表示されなくなりますが、アップローダー本体に影響はありません。 以下の項目で表示を調整できます。
項目名設定内容
ラベル整列ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。
--- # 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/ide/ui-component/uploader.md?ask= ``` 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.