Lowdefy S3 Upload Blocks

To securely upload files to S3, the S3UploadButton or S3UploadPhoto blocks can be used. S3 file downloads can be done by getting a presigned URL using a AwsS3PresignedGetObject request and opening the URL in a new tab which will result in the browser starting the file download.

To access the Amazon S3 API, a AwsS3Bucket connection is defined, and a AwsS3PresignedPostPolicy or AwsS3PresignedGetObject requests can be used to either upload or download files to S3.

AwsS3Bucket Connection

The AwsS3Bucket connenction provides functionality of the Amazon S3 API.

Properties

• accessKeyId: string: AWS IAM access key id with s3 access.
• secretAccessKey: string : AWS IAM secret access key with s3 access.
• region: string: AWS region the bucket is located in
• bucket: string: S3 bucket name.
• read: boolean : Allow reads from the bucket.
• write: boolean: Allow writes to the bucket.

AwsS3PresignedPostPolicy File Upload Request

To upload files, a request of type AwsS3PresignedPostPolicy is used.

Properties

• acl: string: Access control lists used to grant read and write access.
• conditions: array: Conditions to be enforced on the request.
• expires: number: Number of seconds for which the policy should be valid.
• key: string: Key under which object will be stored.

AwsS3PresignedGetObject File Download Request

To download files, a request of type AwsS3PresignedGetObject is used.

Properties

• expires: number: Number of seconds for which the policy should be valid.
• key: string: Key under which object is stored .
• responseContentDisposition: string: Sets the Content-Disposition header of the response.
• responseContentType: string: Sets the Content-Type header of the response.
• versionId: string: VersionId used to reference a specific version of the object.

S3UploadButton and S3UploadPhoto Blocks

Properties

• accept: string: File types accepted by the input. See html file type input accept property at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept.
• button: object: Button block properties.
• disabled: boolean: Disable the file input.
• s3PostPolicyRequestId: string: Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded.
• showUploadList: boolean: Whether to show default upload list.
• singleFile: boolean: Only allow a single file to be uploaded. Only one file can be selected in the prompt and the upload button is disabled after a file is uploaded.

Events

• onChange: Triggered when the upload state is changing.
• onClick: Triggered when the upload button is clicked.
• onSuccess: Triggered when the upload is successful, returns _event object:
  • meta:
    • bucket: Name of bucket that the file was stored in.
    • filename: Uploaded filename.
    • key: Key under which the file is stored.
    • size: Size of uploaded file.
    • type: Type of uploaded file.
    • uid: UID of uploaded file.
• onDone: Triggered when the upload is completed, returns _event object:
  • meta:
    • bucket: Name of bucket that the file was stored in.
    • filename: Uploaded filename.
    • key: Key under which the file is stored.
    • size: Size of uploaded file.
    • type: Type of uploaded file.
    • uid: UID of uploaded file.
• onError: Triggered when an error occurs, returns _event object:
  • meta:
    • bucket: Name of bucket that the file was stored in.
    • filename: Uploaded filename.
    • key: Key under which the file is stored.
    • size: Size of uploaded file.
    • type: Type of uploaded file.
    • uid: UID of uploaded file.

Examples

1. File Upload and Download:

# .env secrets needed
LOWDEFY_SECRET_UPLOADS_S3_ACCESS_KEY_ID
LOWDEFY_SECRET_UPLOADS_S3_SECRET_ACCESS_KEY
LOWDEFY_SECRET_UPLOADS_S3_BUCKET

# lowdefy.yaml
...

connections:
  - id: uploads_bucket
    type: AwsS3Bucket
    properties:
      accessKeyId:
        _secret: UPLOADS_S3_ACCESS_KEY_ID
      secretAccessKey:
        _secret: UPLOADS_S3_SECRET_ACCESS_KEY
      region: af-south-1
      bucket:
        _secret: UPLOADS_S3_BUCKET
      write: true

pages:
  - id: s3_example_file_upload
    type: PageHeaderMenu
    properties:
      title: S3 Example File Upload
    layout:
      contentGutter: 16

    events:
      onMount:
        - id: set_state
          type: SetState
          params:
            files: []

    requests:
      - id: upload_file
        type: AwsS3PresignedPostPolicy
        connectionId: uploads_bucket
        payload:
          key:
            _state: file_uploader.file.name
        properties:
          key:
            _payload: key
      - id: download_file
        type: AwsS3PresignedGetObject
        connectionId: uploads_bucket
        payload:
          key:
            _state: selected.key
          responseContentType:
            _state: selected.type
        properties:
          key:
            _payload: key
          responseContentType:
            _payload: responseContentType

    blocks:
      - id: file_uploader_card
        type: Card
        properties:
          title: Upload Files
        blocks:
          - id: file_uploader
            type: S3UploadButton
            properties:
              s3PostPolicyRequestId: upload_file
              button:
                title: Upload
            events:
              onSuccess:
                - id: set_state
                  type: SetState
                  params:
                    files:
                      _array.concat:
                        - _state: files
                        - - _event: meta

      - id: file_card
        type: Card
        properties:
          title: Files
        blocks:
          - id: files_table
            type: AgGridAlpine
            properties:
              enableCellTextSelection: true
              rowData:
                _state: files
              defaultColDef:
                sortable: true
                resizable: true
                filter: true
              columnDefs:
                - headerName: filename
                  field: filename
                - headerName: size
                  field: size
                - headerName: type
                  field: type
            events:
              onRowClick:
                - id: set_selected_id
                  type: SetState
                  params:
                    selected:
                      _event: row
                - id: download_file
                  type: Request
                  params: download_file
                - id: get_download_link
                  type: Link
                  messages:
                    error: Failed to open file. Check if popups are blocked in your browser.
                  params:
                    url:
                      _request: download_file
                    newTab: true

2. Photo Upload and Download:

# .env secrets needed
LOWDEFY_SECRET_UPLOADS_S3_ACCESS_KEY_ID
LOWDEFY_SECRET_UPLOADS_S3_SECRET_ACCESS_KEY
LOWDEFY_SECRET_UPLOADS_S3_BUCKET

# lowdefy.yaml
...
connections:
  - id: uploads_bucket
    type: AwsS3Bucket
    properties:
      accessKeyId:
        _secret: UPLOADS_S3_ACCESS_KEY_ID
      secretAccessKey:
        _secret: UPLOADS_S3_SECRET_ACCESS_KEY
      region: af-south-1
      bucket:
        _secret: UPLOADS_S3_BUCKET
      write: true

pages:
  - id: s3_example_photo_upload
    type: PageHeaderMenu
    properties:
      title: S3 Example Photo Upload
    layout:
      contentGutter: 16

    events:
      onMount:
        - id: set_state
          type: SetState
          params:
            files: []

    requests:
      - id: upload_file
        type: AwsS3PresignedPostPolicy
        connectionId: uploads_bucket
        payload:
          key:
            _state: file_uploader.file.name
        properties:
          key:
            _payload: key
      - id: download_file
        type: AwsS3PresignedGetObject
        connectionId: uploads_bucket
        payload:
          key:
            _state: selected.key
          responseContentType:
            _state: selected.type
        properties:
          key:
            _payload: key
          responseContentType:
            _payload: responseContentType

    blocks:
      - id: file_uploader_card
        type: Card
        properties:
          title: Upload Files
        blocks:
          - id: file_uploader
            type: S3UploadPhoto
            properties:
              s3PostPolicyRequestId: upload_file
              button:
                title: Upload
            events:
              onSuccess:
                - id: set_state
                  type: SetState
                  params:
                    files:
                      _array.concat:
                        - _state: files
                        - - _event: meta

      - id: file_card
        type: Card
        properties:
          title: Files
        blocks:
          - id: files_table
            type: AgGridAlpine
            properties:
              enableCellTextSelection: true
              rowData:
                _state: files
              defaultColDef:
                sortable: true
                resizable: true
                filter: true
              columnDefs:
                - headerName: filename
                  field: filename
                - headerName: size
                  field: size
                - headerName: type
                  field: type
            events:
              onRowClick:
                - id: set_selected_id
                  type: SetState
                  params:
                    selected:
                      _event: row
                - id: download_file
                  type: Request
                  params: download_file
                - id: get_download_link
                  type: Link
                  messages:
                    error: Failed to open file. Check if popups are blocked in your browser.
                  params:
                    url:
                      _request: download_file
                    newTab: true