Skip to main content

ファイルの使い方

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

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

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

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

ファイルが選択された時に実行されるデータフローを設定する

[データフロー(選択された時)] で、データフローを選択し、ファイルが選択された時に実行されるデータフローを設定します。

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

ファイルを選択する

  1. [ファイル] を配置する。
  2. [ファイルを選択する] をクリックし、ファイルを選択する。
  3. [状態管理] をクリックし、[UIエレメント] の中のfile1をクリックする。
  4. valueの0番目のdatanamecontentTypeにそれぞれ値が入っていることを確認する。

データフローを作成する

  1. [データフローリスト][新規作成] をクリックする。
  2. AWS 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. [アクション]runDataflowを選択する。
  3. [データフロー]dataflow1を選択する。
  4. もう一度ファイルを選択する。
  5. [ボタン] をクリックし、ファイルをアップロードする。

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

テーブルでファイルをリスト表示する

  1. [データフローリスト][新規作成] をクリックする。
  2. [S3] などのストレージを選択する。
  3. [オプションの入力] を開き、[Action]List objectsを選択する。
  4. [Bucket]に使用するBucket名を入力する。
  5. [実行する]をクリックし、実行する。
  6. [状態管理]を開き、dataflow2dataの中にContentsが入っていることを確認する。
  7. [カラム] を配置する。
  8. [カラム] の左に[テーブル] を配置する。
  9. [カラム] の右に先程配置した [ファイル][ボタン] を配置し、幅を調節する。
  10. [エディター][データ]{{ dataflow2.data.Contents }}と入力する。

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

  1. [状態管理][UIエレメント]を 開き、[table1]selectedRowdataの中にKeyが入っていることを確認する。
  2. [テキスト] を配置する。
  3. [エディター][テキスト]{{ table1.selectedRow.data.Key }} と入力する。
  4. [画像] を配置する。
  5. [エディター][URL]
    {{ "https://[バケット名].s3.[リージョン].amazonaws.com/" + table1.selectedRow.data.Key }}
    ex. {{ "https://aktky-bucket.s3.us-east-2.amazonaws.com/" + table1.selectedRow.data.Key }}
    などと入力する。
  6. table1で選択したファイルのidと画像が表示されていることを確認する。

実際にアップロードしたファイルを確認する

  1. [データフローリスト] からdataflow1をクリックし、[成功時のトリガーを設定する] にチェックをつけ、[データフロー]dataflow2を選択する。
  2. 実際にファイルをアップロードする。
  3. アップロードされたファイルを確認する。

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

ファイルを選択する

  1. [ファイル] を配置する。
  2. [ファイルを選択する] をクリックし、ファイルを選択する。
  3. [状態管理] をクリックし、[UIエレメント] の中のfile1をクリックする。
  4. valueの0番目のdatanamecontentTypeにそれぞれ値が入っていることを確認する。

データフローを作成する

  1. [データフローリスト][新規作成] をクリックする。
  2. RestAPIと連携された任意のデータソースを選択する。
  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形式に変換されてリクエストされます。