# Event Handlers

React events mirror core upload state.

```tsx
<UpupUploader
    uploadEndpoint="/api/upload-token"
    onFilesSelected={files => console.log(files)}
    onUploadStart={() => console.log('started')}
    onFileUploadComplete={file => console.log(file)}
    onUploadComplete={files => console.log(files)}
    onError={message => console.error(message)}
/>
```

Common handlers:

| Handler                 | Called when                                                                           |
| ----------------------- | ------------------------------------------------------------------------------------- |
| `onFilesSelected`       | Files enter core state.                                                               |
| `onFileRemoved`         | A file is removed.                                                                    |
| `onUploadStart`         | Upload begins.                                                                        |
| `onFileUploadProgress`  | Byte progress changes for one file.                                                   |
| `onFilesUploadProgress` | Aggregate byte progress across the batch.                                             |
| `onFileUploadComplete`  | One file succeeds.                                                                    |
| `onUploadComplete`      | All files succeed.                                                                    |
| `onError`               | A validation, config, network, or provider failure occurs; delivers a message string. |

File objects use the `UploadFile` contract from `@useupup/core/contracts`.