pickFiles

pickFiles action enables users to select files from their device for further processing or usage within the app, offering a seamless way to choose and work with files, enhancing user interactions and content management capabilities.

Properties

Property	Type	Description
id	string	Give the picker an ID allows you to bind to its result, which can be access anywhere e.g. ${filePicker.files…}
allowMultiple	boolean	Allow users to pick multiple files (default False)
allowCompression	boolean	It will allow media to apply the default OS compression (default True)
allowedExtensions	array	Allow files with specific extension e.g jpg, png, pdf

Ensemble File object

The files picked using pickFiles or created using camera using openCamera all shared the same following object.

Property	Type	Description
name	string	name of the file, could be null
size	integer	size of file in bytes, could be null
ext	string	extension of the file, could be null
path	string	file path, null on web, available in native mobile app
bytes	dynamic	if path is null i.e for web, we’ll have bytes of files

[NOTE]
Path will be null when you are developing in the web studio. You’ll have the path in your native mobile build or ensemble preview / go app.

Example


View:
  # Optional - style the screen
  styles:
    scrollableView: true
 
  # 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 including uploadFiles example.