> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

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**

```kotlin theme={null}
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:

```kotlin theme={null}
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:

```kotlin theme={null}
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.