Usages & File Uploads

Learn how to configure Edra in your application, manage editor state, and implement custom media file uploads.

Handling File Uploads

Edra provides a unified media placeholder node that supports uploading images, videos, and audio files. By configuring the onFileUpload callback, you can capture the file when it is dropped, pasted, or selected via the file manager, upload it to your remote storage, and insert it back into the document.

The upload handler function should receive a standard File object and return a Promise<string> that resolves to the public URL of the uploaded asset:

1. Shadcn UI Flavor

To use Edra with the preconfigured Tailwind CSS / shadcn-svelte toolbar and components layout, pass the onFileUpload handler inside the createEditor options:

2. Headless UI Flavor

If you prefer using the headless logical core flavor to build your own custom editor wrapper and styling, pass onFileUpload in the exact same manner when calling createEditor from the headless entrypoint: