Skip to main content

Upload Files using API

This page shows you how to use the Filepicker widget to upload file data using API.

Prerequisites

  • A Filepicker widget to upload files.
  • Access to a cloud platform with API endpoints.

Configure query

Follow these steps to configure the API:

  1. In the API configuration, specify the request method (POST or PUT) and provide your API URL, including any necessary path.

  2. In the Body tab, select the encoding method that aligns with the API's requirements.

You can select any of the following methods:

JSON is typically used when uploading files along with structured data, such as metadata or parameters. It is suitable for both single and multiple file uploads.

Filepicker Json

Example:

{
"file": "{{ FilePicker1.files[0].data }}", // Accessing the file data
"key1": "value1",
"key2": "value2"
}
// [0] represents index of the file.

In this example:

  • file, corresponds to the file you want to upload, which should be selected from the FilePicker widget.

    • If you want to upload just the file data, use: {{ FilePicker1.files[0].data }}.
    • If you want to upload all the details of a file, including format, type, name, and data, use: {{ FilePicker1.files[0] }}.
    • If you want to upload multiple files, use {{ FilePicker1.files }}.
  • The key1 and key2 parameters can be customized to match the specific data you want to include in your API request. For instance, you can add a filename, file path, access key, or any other relevant parameters.

tip

If you want to upload files of significant size, adjust the Query timeout settings in the API configuration.

Configure Filepicker widget

Follow these steps to configure the Filepicker widget to upload files:

  • Configure the Allowed file types property of the Filepicker widget to allow users to upload files of specific formats.

  • Configure the Data Format property to align with the data format expected by the API or platform you are using. When uploading image files using the FilePicker widget, ensure you select Base64 as Data Format.

  • Set the Filepicker widget's onFilesSelected event to execute the query.

After completing these steps, select your file(s) and click the Upload File(s) button to send them to the server.