app/components/media/upload.ts

Functions

Imports

It imports no other module of this repo. Imported by app/components/editor/writing-surface.tsx, app/components/media/library-insert.tsx.

Source

1// The editor's image upload: one file to Carrel's per-project media endpoint, which hands it to the site
2// through the site API. Never rejects with anything but an Error that says why, so the editor shows it.
3
4export type EditorMedia = {
5  /** Carrel's media endpoint for this project: GET lists for the picker, POST uploads. */
6  endpoint: string;
7  /** The types the site accepts, for the file chooser's `accept`. A hint, not a control: the site checks. */
8  accept: string;
9  /** The site's own Markdown for an image with its alt text. */
10  figure: (url: string, alt: string) => string;
11};
12
13export type Uploaded = {
14  /** What the Markdown carries: the site's own address for the file. */
15  url: string;
16  /** Where Carrel's page loads it from, since Carrel is a different host. */
17  src: string;
18};
19
20export async function uploadImage(endpoint: string, file: File): Promise<Uploaded> {
21  let response: Response;
22  try {
23    const form = new FormData();
24    form.set("file", file);
25    response = await fetch(endpoint, { method: "POST", body: form });
26  } catch (error) {
27    throw new Error(`Upload failed: ${error instanceof Error ? error.message : String(error)}`);
28  }
29  const body = (await response.json().catch(() => ({}))) as { url?: string; src?: string; error?: string };
30  if (!response.ok || !body.url) throw new Error(body.error ?? `Upload failed (${response.status}).`);
31  return { url: body.url, src: body.src ?? body.url };
32}