uploadFiles

uploadFiles action allows users to select and upload files from their device to the app, enabling easy data transfer and content sharing, supporting various file formats, and enhancing the app’s versatility and user engagement.

Properties

Property	Type	Description
id	string	Give the uploadApi an ID, allows you to bind to its result. e.g. ${apiId.body…}
uploadApi	string	Enter the name of your defined API
onComplete	action	Execute another Action upon successful upload of files
onError	action	Execute an Action when uploader fails with error(s)
inputs	array	Define the list of input names that upload API accepts
fieldName	string	Field name that your server is expecting (default files)
files	string	Binded files from sources like camera or picker. e.g ${filePicker.files}, ${camerId.files}
options	object	see properties

properties.option

Property	Type	Description
maxFileSize	integer	File size that is allowed (default 100 mb), If multiple is allow then sum of all files
overMaxFileSizeMessage	string	Error message to show when selected files size is above maxFileSize.
backgroundTask	boolean	If set true, uploading will be done in background.
showNotification	boolean	If set true, progress will be show in notification bar.
networkType	object	An enumeration of network types. `connected` `metered` `not_required` `not_roaming` `unmetered` `temporarily_unmetered`

Example


View:
  # Optional - style the screen
  styles:
    scrollableView: true
 
  # Optional - set the header for the screen
  header:
    title: "Action: uploadFiles"
 
  # Specify the body of the screen
  body:
    Column:
      styles: { gap: 16, padding: 24 }
      children:
        - Markdown:
            text: |
              Use the `uploadFiles`  action  upload files to specify `uploadApi`. 
 
              Then use the `onComplete`  properties to execute other actions when upload is successful.
 
        - Button:
            label: Pick Files
            onTap:
              pickFiles:
                id: picker
 
        - Button:
            label: Upload Picked files
            onTap:
              executeCode:
                body: |
                  //@code
                  loading.visible = true;
 
                onComplete:
                  uploadFiles:
                    id: fileUploader
                    files: ${picker.files}
                    uploadApi: fileUploadApi
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    onComplete: |
                      //@code
                      loading.visible = false;
                    onError: |
                      //@code
 
                      loading.visible = false;
                    maxFileSize: 100
                    overMaxFileSizeMessage: Please select files less than 100kb
 
        - Markdown:
            text: ${fileUploader.body}
 
        - Progress:
            display: circular
            id: loading
            visible: false
 
        - Divider
 
        - Markdown:
            text: |
              Chain multiple file actions to pick files and upload them in one go
              - Using `pickFiles` to pick file based on platform picker
              - Using `uploadFiles` to upload selected files from file picker
 
        - Button:
            label: Pick & Upload
            onTap:
              pickFiles:
                id: filePicker
                onComplete:
                  uploadFiles:
                    files: ${filePicker.files}
                    uploadApi: fileUploadApi
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    onComplete: |
                      //@code
                      ensemble.debug('File uploaded');
 
        - Divider:
 
        - Markdown:
            text: |
              `pickFiles`  also comes with option such as:
 
                - `allowMultiple` : To allow muliple file selection from gallery picker default (false)
                - `allowCompression` : It will allow media to apply the default OS compression (default True)
                - `allowedExtensions` : To filter file picking based on extensions like jpg, png, pdf...
 
              `uploadFiles`  also comes with option such as:
 
                - `files` : Pass the files that needs to upload e.g ${filePicker.files}
 
                - `fieldName` : Field name that your server is expecting. (default files).
 
                - `maxFileSize`: File size that is allowed in kb (default 100 mb), If multiple is allow then sum of all files
                - `overMaxFileSizeMessage`: Error message to show when selected files size is above maxFileSize.
 
        - Row:
            styles: { mainAxis: spaceBetween, crossAxis: center }
            children:
              - Button:
                  label: Multiple Images
                  onTap:
                    pickFiles:
                      id: images
                      allowMultiple: true
                      allowCompression: false
                      allowedExtensions:
                        - jpg
                        - png
 
              - Text:
                  text: ${images.files.length}
        - Button:
            label: Upload Multiple images
            onTap:
              uploadFiles:
                id: imageUploader
                uploadApi: fileUploadApi
                files: ${images.files}
                fieldName: files
                inputs:
                  url: https://en09cdal5asztm.x.pipedream.net
                maxFileSize: 100 # in kb
                overMaxFileSizeMessage: Please select files less than 100kb
 
        - Markdown:
            text: ${imageUploader.body}
        - Divider
 
        - Markdown:
            text: |
              ### Background file upload
              - Pick and Upload files in background.
              - In unmetered connection (wifi/lan)
              - Also show notification
              - *Not supported on web / studio.
 
        - Button:
            label: Background upload
            onTap:
              pickFiles:
                id: bgFilePicker
                onComplete:
                  uploadFiles:
                    uploadApi: fileUploadApi
                    files: ${bgFilePicker.files}
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    id: bgUploader
                    options:
                      backgroundTask: true
                      showNotification: true
                      networkType: unmetered
 
        - Divider:
 
        - Markdown:
            text: |
              _Side Note: If you are using default uploadURL it's using RequestBin_
 
              _RequestBin has maxFileSize of __100 kb__ above it will fail._
 
              _You can see you API request [here](https://requestbin.com/r/en09cdal5asztm/2Lzx3lZ071EFF9dFKZCXJTnkJHS)_
 
        - Divider:
 
API:
  fileUploadApi:
    inputs:
      - url
    uri: ${url}
    method: POST

complete example here