ファイルの使い方
複数のファイルをアップロードする
複数のファイルをアップロードする場合は [複数ファイルを許可] の false
をtrue
に変更します。
ファイルのアップロードを必須にする
ファイルのアップロードを必須にしたい場合は [必須] の 入力必須
にチェックをつけます。
ファイルが選択された時に実行されるデータフローを設定する
[データフロー(選択された時)] で、データフローを選択し、ファイルが選択された時に実行されるデータフローを設定します。
AWS S3でファイルをアップロードする
ファイルを選択する
- [ファイル] を配置する。
- [ファイルを選択する] をクリックし、ファイルを選択する。
- [状態管理] をクリックし、[UIエレメント] の中の
file1
をクリックする。 value
の0番目のdata
、name
、contentType
にそれぞれ値が入っていることを確認する。
データフローを作成する
- [データフローリスト] の [新規作成] をクリックする。
- AWS S3と連携された任意のデータソースを選択する。
- [Action] で
Upload
を選択する。 - [Bucket]に使用するBucket名を入力する。
- [Body] に
{{ file1.value[0].data }}
と入力する。 - [Key] に
{{ file1.value[0].name }}
と入力する。 - [Content Type] に
{{ file1.value.[0].contentType }}
と入力する。
データフローとボタンを紐づける
- [ボタン] を配置する。
- [イベントを追加する] をクイックする。
- [データフロー] で
dataflow1
を選択する。 - もう一度ファイルを選択する。
- [ボタン] をクリックし、ファイルをアップロードする。
アップロードされたファイルを確認する
テーブルでファイルをリスト表示する
- [データフローリスト] の [新規作成] をクリックする。
- [S3] などのストレージを選択する。
- [Action] で
List objects
を選択する。 - [Bucket]に使用するBucket名を入力する。
- [実行する]をクリックし、実行する。
- [状態管理]を開き、
dataflow2
のdata
の中にContents
が入っていることを確認する。 - [カラム] を配置する。
- [カラム] の左に[テーブル] を配置する。
- [カラム] の右に先程配置した [ファイル] と [ボタン] を配置し、幅を調節する。
- [エディター] の [データ] に
{{ dataflow2.data.Contents }}
と入力する。
テキストと画像でファイルの中身を確認する
- [状態管理] の [UIエレメント]を 開き、[table1] の
selectedRow
のdata
の中にKey
が入っていることを確認する。 - [テキスト] を配置する。
- [エディター] の [テキスト] に
{{ table1.selectedRow.data.Key }}
と入力する。 - [画像] を配置する。
- [エディター] の [URL] に
{{ "https://[バケット名].s3.[リージョン].amazonaws.com/" + table1.selectedRow.data.Key }}
ex.{{ "https://aktky-bucket.s3.us-east-2.amazonaws.com/" + table1.selectedRow.data.Key }}
などと入力する。 table1
で選択したファイルのidと画像が表示されていることを確認する。
実際にアップロードしたファイルを確認する
- [データフローリスト] から
dataflow1
をクリックし、[成功時に実行するアクション] にチェックをつけ、[データフロー] でdataflow2
を選択する。 - 実際にファイルをアップロードする。
- アップロードされたファイルを確認する。
RestAPIでmultipart/form-data形式でファイルをアップロードする
ファイルを選択する
- [ファイル] を配置する。
- [ファイルを選択する] をクリックし、ファイルを選択する。
- [状態管理] をクリックし、[UIエレメント] の中の
file1
をクリックする。 value
の0番目のdata
、name
、contentType
にそれぞれ値が入っていることを確認する。
データフローを作成する
- [データフローリスト] の [新規作成] をクリックする。
- RestAPIと連携された任意のデータソースを選択する。
- [メソッドを選択してください] の項目で
POST
を選択する。 - [Path] にファイルアップロード用のエンドポイントを入力する。
- [Body type] で
Form Data
を選択する。 - [パラメータ] を追加し、
Text
からFile
に切り替える。 - [Key] にAPIで受け取る任意のキー名を入力する。
- [Value] に
{{ file1.value[0] }}
を入力する。
※プロダクト上はファイルがBase64にエンコードされた文字列として扱っておりますが、APIリクエスト前にmultipart/form-data形式に変換されてリクエストされます。