image-converter-client/app/routes/_index.tsx

import { Input } from "~/components/ui/input";
import type { MetaFunction } from "@remix-run/cloudflare";
import CropSelector from "./CropSelector";
import { Button } from "~/components/ui/button";
import { z, ZodError } from "zod";
import { ChangeEvent, Suspense, useEffect, useRef, useState } from "react";
import { useSubmit } from "@remix-run/react";
import { ActionFunctionArgs, Form, json, useFetcher } from "react-router-dom";

export const meta: MetaFunction = () => {
  return [
    { title: "Convert images for the web!" },
    { name: "image converter", content: "Image conversion service" },
  ];
};

const MAX_FILE_SIZE = 5 * 1024 * 1024;

const ACCEPTED_IMAGE_TYPES = [
  "image/jpeg",
  "image/jpg",
  "image/png",
  "image/webp",
  "image/gif",
] as const;

export const imageFileSchema = z.object({
  name: z.string(),
  size: z.number().max(MAX_FILE_SIZE, "File size must be less than 5MB"),
  type: z.enum(ACCEPTED_IMAGE_TYPES, {
    errorMap: () => ({ message: "Only .jpg, .jpeg, .png, .webp and .gif files are accepted." }),
  }),
});

export default function Index() {
  const [image, setImage] = useState<string>();
  const imageRef = useRef<HTMLImageElement | null>(null);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.files);
    if (!e.target.files) {
      return;
    }
    setImage(URL.createObjectURL(e.target.files[0]));
  };
  useEffect(() => {
    if (imageRef.current?.complete && image) {
      URL.revokeObjectURL(image);
    }
  });
  return (
    <div className="w-screen h-screen flex flex-col justify-center items-center">
      {image && <img ref={imageRef} src={image} className="h-40 w-40" />}
      <Input name="image-upload" type="file" onChange={handleFileChange} />
      <CropSelector image={image} />
      <Button>Submit</Button>
    </div>
  );
}

// export async function action({ request }: ActionFunctionArgs) {
//   const formData = await request.formData();
//   const image = formData.get("image-upload") as File;
//   console.log("skibidi action!");
//   try {
//     const valid_image = imageFileSchema.parse(image);
//     return valid_image;
//   } catch (e: any) {
//     if (e instanceof ZodError) {
//       const errors: Record<string, string> = {};
//       errors.image = e.message;
//       return json({ errors });
//     }
//     console.log(e);
//   }
// }