Skip to main content

ファイルの使い方

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

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

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

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

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

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

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

ファイルを選択する​

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

データフローを作成する​

  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. [イベントを追加する] をクイックする。
  3. [データフロー] でdataflow1を選択する。
  4. もう一度ファイルを選択する。
  5. [ボタン] をクリックし、ファイルをアップロードする。

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

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

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

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

  1. [状態管理] の [UIエレメント]を 開き、[table1] の selectedRowのdataの中に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番目のdata、name、contentTypeにそれぞれ値が入っていることを確認する。

データフローを作成する​

  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形式に変換されてリクエストされます。