Skip to main content
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:
  1. Handle file selection (file picker or camera)
  2. Process the files (validate, resize, etc.)
  3. Upload to your server
  4. 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.