Image integration

Give the image picker an upload adapter.

Configure imageUpload(file, editor) to enable the file picker, image paste, and image drop. Your application stores the file and returns its URL.

Try the image dialog

Place the cursor, choose Insert Image, then pick a file. You can also paste or drop an image onto the editor. This static demo returns a sample FeatherText image URL; it does not store or send your file.

Waiting for the generated bundle…

The returned URL is inserted into the synchronized textarea.

Application upload adapter

async imageUpload(file) {
  const body = new FormData();
  body.append("image", file);
  const response = await fetch("/api/images", {
    method: "POST",
    body,
    credentials: "same-origin",
  });
  if (!response.ok) throw new Error("Image upload failed");
  const { url } = await response.json();
  return url;
}