Image Upload Handling

This guide shows you how to handle image uploads in Joyfill forms.

How It Works

When a user uploads an image, the onUpload callback is triggered. You need to:

Handle file selection (file picker or camera)
Process the files (validate, resize, etc.)
Upload to your server
Return the uploaded file URLs

Basic Example

Form(
    editor = rememberDocumentEditor(json),
    onUpload = { event ->
        listOf("https://picsum.photos/200/300")
    }
)

Using the Event Data

The onUpload callback receives information about the upload request:

onUpload = { event ->
    // Check which field requested upload
    println("Upload for field: ${event.fieldId}")
    println("Field title: ${event.source?.component?.title}")
    
    // Check if field supports multiple images
    val allowMultiple = event.source?.component?.multi == true
    
    // Return appropriate number of URLs
    if (allowMultiple) {
        listOf("https://picsum.photos/200", "https://picsum.photos/300", "https://picsum.photos/400")
    } else {
        listOf("https://picsum.photos/200")
    }
}

Async Uploads

For uploads that take time, use suspend functions:

onUpload = { event ->
    // Your async upload logic here
    delay(2000) // Simulate upload time
    
    // Return URLs when upload completes
    listOf("https://picsum.photos/200")
}

Note: The onUpload callback only handles the Joyfill integration. You’re responsible for implementing file selection, processing, and server upload according to your app’s needs.

Getting Started

Guides

API Reference

Resources

How It Works

Basic Example

Using the Event Data

Async Uploads

​How It Works

​Basic Example

​Using the Event Data

​Async Uploads

How It Works

Basic Example

Using the Event Data

Async Uploads