Upload Multiple Files Using the Form API Element

Introduction

The Joget API Builder allows developers to programmatically create or update form records. When dealing with file attachments, the Form API Element supports uploading files through the addWithFiles endpoint.
This allows external applications such as mobile apps, client portals, or integrations to send one or more files to a Joget form seamlessly.

How does it work?

To upload multiple files to a Joget form, the request must be sent using:

Endpoint:
/jw/api/form/{formId}/addWithFiles

This endpoint accepts form fields and one or more uploaded files.

To upload multiple files, you must:

1. Create a FormData.

2. Append each file to the same field name configured for your File Upload or File Upload (Multiple) Form Element.

3. Please refer to the screenshot below from the Postman tool for reference:
   

Sample Flutter Code for Multiple File Uploads

        import 'dart:convert';
        import 'dart:io';
        import 'package:http/http.dart' as http;
        import 'package:file_picker/file_picker.dart';

        void uploadFiles() async {
            // Pick multiple files
            FilePickerResult? result = await FilePicker.platform.pickFiles(allowMultiple: true);

            if (result != null) {
                var uri = Uri.parse('YOUR_API_ENDPOINT/');
                var request = http.MultipartRequest('POST', uri);

                // Append multiple files to the request
                for (var file in result.files) {
                    request.files.add(
                        http.MultipartFile(
                            'file_upload_field_id[]',
                            File(file.path!).openRead(),
                            File(file.path!).lengthSync(),
                            filename: file.name,
                        ),
                    );
                }

                // Append other form fields
                request.fields['other-form-field'] = 'Value';

                // Send the request
                var response = await request.send();

                if (response.statusCode == 200) {
                    print('Upload successful');
                } else {
                    print('Upload failed with status: ${response.statusCode}');
                }
            } else {
                print('No files selected');
            }
        }