Uploading files using methods

Uploading files with the HTTP Action and Form Data methods

HTTP Action enables developers to send HTTP requests to a server, including uploading files. To upload a file using HTTP Action and Form Data, follow these steps:

1. Create a new HTTP Action;

2. Set the target URL to the server where you want to upload the file;

3. Set the request method to POST;

4. Open the "Body" options and select "Form Data";

5. Add a new key (the parameter name is typically "file") and set the parameter type to "File'';

6. Specify the file by referencing an input or file picker component, such as {{ui.filepicker.value}} or {{ui.input.value[0]}}.

Depending on the component you utilize, the file reference may vary. For instance, when using a file picker component, the file reference can be obtained with {{ui.filepicker.value}}. If a deprecated input component with the type set to 'File' is employed, the file reference should be accessed using {{ui.input.value[0]}}.

Uploading files with the HTTP Action and Binary methods

To upload a file using HTTP Action and the Binary method, follow these steps:

1. Create a new HTTP Action;

2. Set the target URL to the server where you want to upload the file;

3. Set the request method to POST;

4. Open the "Body" options and select "Binary";

5. When using the Binary option, provide an object in the following format: { data: File | Blob | any, filename?: string };

6. Specify the file by referencing an input or file picker component, such as {{ui.filepicker.value}} or {{ui.input.value[0]}}.

7. Ensure the server is configured to accept the binary format for file uploads.

When using Blob or File content with the Binary option, the data will be sent as is. However, for any other content, the system will first attempt to JSON stringify the data and, if unsuccessful, convert it to a string before sending.

Alternatively, you can create a Blob object with binary content without using file components, and then send it to the server. To achieve this, follow these steps:

• Add a leading action step with the following code:

const content = 'Hello, world!';
const mimeType = 'text/plain';
return new Blob([content], { type: mimeType });

• Update the HTTP action to referent the result of the previous step:

{ date: {{data}}, filename: 'hello_world.txt' }

Uploading files via the Fetch method

The first approach to upload the files into your database is by using the FETCH method.

1. Add an input component, and change its type to file.

2. Create the Code action, and specify the code as below:

const file = {{ui.fileInput.value[0]}};
const formData = new FormData();
formData.append('upload', file);

fetch('https://mycompany.com/api/upload-file', { method: "POST", body: formData });

replace 'url' with the necessary URL.

3. Assign the action OnChange trigger of the input or add a button and assign the action on the button's click.