AstralRinth/apps/frontend/src/composables/image-upload.ts

type ImageUploadContext = {
  projectID?: string;
  context: "project" | "version" | "thread_message" | "report";
};

interface ImageUploadResponse {
  id: string;
  url: string;
}

export const useImageUpload = async (file: File, ctx: ImageUploadContext) => {
  // Make sure file is of type image/png, image/jpeg, image/gif, or image/webp
  if (
    !file.type.startsWith("image/") ||
    !["png", "jpeg", "gif", "webp"].includes(file.type.split("/")[1])
  ) {
    throw new Error("File is not an accepted image type");
  }

  // Make sure file is less than 1MB
  if (file.size > 1024 * 1024) {
    throw new Error("File exceeds the 1MiB size limit");
  }

  const qs = new URLSearchParams();
  if (ctx.projectID) qs.set("project_id", ctx.projectID);
  qs.set("context", ctx.context);
  qs.set("ext", file.type.split("/")[1]);
  const url = `image?${qs.toString()}`;

  const response = (await useBaseFetch(url, {
    method: "POST",
    body: file,
    apiVersion: 3,
  })) as ImageUploadResponse;

  // Type check to see if response has a url property and an id property
  if (!response?.id || typeof response.id !== "string") {
    throw new Error("Unexpected response from server");
  }
  if (!response?.url || typeof response.url !== "string") {
    throw new Error("Unexpected response from server");
  }

  return response;
};