ドキュメント
アプリの構築
コンポーネント
ファイルの使い方

ファイルの使い方

複数のファイルをアップロードする

複数のファイルをアップロードする場合は [複数ファイルを許可]falsetrueに変更します。

ファイルのアップロードを必須にする

ファイルのアップロードを必須にしたい場合は [必須]入力必須にチェックをつけます。

Amazon S3 でファイルをアップロードする

ファイルを選択する

  1. [ファイル] を配置する。
  2. [ファイルを選択する] をクリックし、ファイルを選択する。

データフローを作成する

  1. [データフローリスト] の横の [新規作成] をクリックする。
  2. Amazon S3 と連携された任意のデータソースを選択する。
  3. [Action]Upload を選択する。
  4. [Bucket] に使用する Bucket 名を入力する。
  5. [Body]{{ file1.value[0].data }} と入力する。
  6. [Key] に {{ file1.value[0].name }} と入力する。
  7. [Content Type]{{ file1.value.[0].contentType }} と入力する。

データフローとボタンを紐づける

  1. [ボタン] を配置する。
  2. [イベントを追加する] をクイックする。
  3. [データフロー]dataflow1 を選択する。
  4. もう一度ファイルを選択する。
  5. [ボタン] をクリックし、ファイルをアップロードする。

アップロードされたファイルを確認する

  1. [データフローリスト][新規作成] をクリックする。
  2. [Amazon S3] と連携したデータソースを選択する。
  3. [Action]List objects を選択する。
  4. [Bucket] に使用する Bucket 名を入力する。
  5. [実行する] をクリックし、実行する。
  6. [カラム] を配置する。
  7. [カラム] の左に**[テーブル]** を配置する。
  8. [カラム] の右に先程配置した [ファイル][ボタン] を配置し、幅を調節する。
  9. [エディター][データ]{{ dataflow2.data.Contents }} と入力する。

テキストと画像でファイルの中身を確認する

  1. [テキスト] を配置する。
  2. [エディター][テキスト]{{ table1.selectedRow.data.Key }} と入力する。
  3. [画像] を配置する。
  4. [エディター][URL]{{ "https://[バケット名].s3.[リージョン].amazonaws.com/" + table1.selectedRow.data.Key }} と入力する。
  5. table1で選択したファイルの情報が表示されていることを確認する。

multipart/form-data 形式でファイルをアップロードする

ファイルを選択する

  1. [ファイル] を配置する。
  2. [ファイルを選択する] をクリックし、ファイルを選択する。

データフローを作成する

  1. [データフローリスト][新規作成] をクリックする。
  2. REST API と連携された任意のデータソースを選択する。
  3. [メソッドを選択してください] の項目で POST を選択する。
  4. [Path] にファイルアップロード用のエンドポイントを入力する。
  5. [Body type]Form Data を選択する。
  6. [パラメータ] を追加し、Text から File に切り替える。
  7. [Key] に API で受け取る任意のキー名を入力する。
  8. [Value]{{ file1.value[0] }} を入力する。

※プロダクト上はファイルが Base64 にエンコードされた文字列として扱っておりますが、API リクエスト前に multipart/form-data 形式に変換されてリクエストされます。