Upload

The upload feature allows a file to be uploaded to an endpoint using multipart form-data or base64 formats.

A file upload component will be rendered when:

• Any schema has Persist Async configured with an inner Blob Schema
• A String Schema is configured with the base64url format

Warning: Using String Schema with the base64url format is not encouraged as it can lead to performance issues, particularly with larger files. Base64 encoding is inefficient which leads to an increased upload size when compared to the original binary.

Always prefer using Persist Async with Blob Schema for a better upload experience.

Step.build {
    id = "upload-example"
    title = "Upload Example"
    schemas {
        obj {
            properties {

                // Recommended
                string("multiPartFile") {
                    title = "Multipart upload"
                    persistAsync {
                        url = "/persistAsyncUrl"
                        method = HttpMethod.POST
                        param = "secretParam"
                        idProperty = "secretIdProperty"
                        schema = BlobSchema.build {
                            title = "Invoice"
                            description = "PNG, JPG, or PDF, less than 5mb"
                            source = Upload.Source.FILE
                            accepts = listOf(
                                "image/png",
                                "image/jpg",
                                "application/pdf"
                            )
                        }
                    }
                }

                // Not recommended
                string("base64File") {
                    title = "Base64 upload"
                    description = "PNG, JPG, or PDF, less than 5mb"
                    format = StringSchema.Format.BASE64URL
                    source = Upload.Source.FILE
                    accepts = listOf(
                        "image/png",
                        "image/jpg",
                        "application/pdf"
                    )
                }
            }
        }
    }
}

For multi-file uploads, array schemas can be used in combination with any of the options described earlier

Step.build {
    id = "upload-example"
    title = "Upload Example"
    schemas {
        obj {
            properties {
                list("multiUploadPersistBlob") {
                    minItems = 1
                    maxItems = 3
                    title = "Multi-file upload with persist async blob schema"
                    addItemTitle = "ignored"
                    editItemTitle = "ignored"
                    items = StringSchema.build {
                        persistAsync {
                            url = "/persistAsyncUrl"
                            method = HttpMethod.POST
                            param = "secretParam"
                            idProperty = "secretIdProperty"
                            schema = BlobSchema.build {
                                source = Upload.Source.FILE
                                description = "PNG, JPG, or PDF, less than 5mb"
                                accepts = listOf(
                                    "image/png",
                                    "image/jpg",
                                    "application/pdf"
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

The possible sources for a file