Image Upload Handling

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.