Image Upload

import { Image as TiptapImage } from "feza";
 
const image = TiptapImage.configure({
  validateFn: (file) => {
    // Custom validation logic
    return true;
  },
 
  uploadFn: (file) => {
    // Image upload implementation
  },
});
 
const extensions = [
  image,
  // ...
];

const image = TiptapImage.configure({
  validateFn: (file) => {
    // Your custom validation logic
    // Return true to allow upload
    // Return false to prevent upload
    if (file.size > 3 * 1024 * 1024) {
      toast.error("File size must be less than 3MB");
      return false;
    }
 
    return true;
  },
});

const image = TiptapImage.configure({
  uploadFn: (file) => {
    const formData = new FormData();
    formData.append("file", file);
 
    // Do not await here
    const uploadPromise = fetch("/api/upload", {
      method: "POST",
      body: formData,
    });
 
    return new Promise((resolve, reject) => {
      toast.promise(
        uploadPromise.then(async (res) => {
          if (res.ok) {
            const { url } = (await res.json()) as { url: string };
            resolve(url);
          } else if (res.status === 400) {
            // Assuming your API returns an object
            // with an "error" property
            const { error } = (await res.json()) as { error: string };
            throw new Error(error);
          } else {
            throw new Error("Error uploading image. Please try again");
          }
        }),
        {
          loading: "Uploading image...",
          success: "Image uploaded successfully",
          error: (e) => {
            reject(e);
            return e.message;
          },
        }
      );
    });
  },
});