# Uploader

UploadファイルのURLの表示は `{{upload名.value}}` で取得できます。 画像ファイルをアップロードする場合、Dashcombが提供しているImageコンポーネントとセットで使うことも可能です。IDE画面では取得した値をImageコンポーネントの画像URLに `{{upload名.value}}` を設定しておくことで、アップロードした画像はリアルタイムでImageエリアに表示されます。

## プロパティ

Uploaderコンポーネントには、以下のプロパティが含まれています。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-518e9c37cd747d3aab17966888354a9e165e026e%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%80%E3%83%BC%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

**オブジェクト**

アップローダーオブジェクトの変数名です。Uploaderコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `upload1`、`upload2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{upload1.value}}` で `upload1` の値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

トグルスイッチをONにすると、アップローダーが非表示になります。

#### 無効

トグルスイッチをONにすると、アップローダーが無効になり、入力できなくなります。

### データ <a href="#data" id="data"></a>

**ラベル文字**

アップローダーのラベルテキストです。Uploader コンポーネントをドラッグ＆ドロップすると、自動的に `Uploader` に設定されます。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% endhint %}

#### 提示語

アップローダーのプレースホルダーです。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

**パス**

ファイル格納先のフォルダパスです。ファイルのインターネットでの相対パスで、英数字のみ使用可能です。設定していない場合、格納先はCloud Storageのルートパスとなります。

**ストレージ**

アップロード用に事前に作成されたCloud Storage です。ストレージ指定なしでのファイルアップロードはできません。

また、同じストレージにアップロードした同名ファイルは上書きされます。

{% hint style="info" %}
Cloud Storage の設定方法については、[クラウドストレージ](https://docs.dashcomb.com/dashcomb-help-center/ide/query-region/kuraudosutorji) のページを参照してください。
{% endhint %}

**自動リネーム**

Hashリネームのスイッチです。トグルスイッチをONにすると、ファイル名をハッシュ値にリネームします。

**ドメイン置換え**

`bucket名.s3.amazonaws.com` のようなドメインを、各自のドメイン `cnd.example.com` に置き換えます。設定していない場合、ファイルのドメインは事前に作成されたCloud StorageのBucket名となります。

### アクション

Uploader コンポーネントのアクションは、以下を設定することができます。

#### **onChange**

アップローダーのonChange イベントの発生時（Uploaderの入力内容が変更された時）に、指定アクションを実行できます。

### 外観 <a href="#appearance" id="appearance"></a>

**高さ**

アップロードエリアの高さを指定します。初期設定では2行に設定されており、最小設定は1行です。

#### **ラベル表示**

アップローダーのラベルテキストの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、アップローダーにラベルが表示されなくなりますが、アップローダー本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="132">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr><tr><td>ラベル横幅</td><td>ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。</td><td></td></tr></tbody></table>