christian
167a23a000
All checks were successful
Deploy to Cloudflare Pages / deploy (push) Successful in 37s
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
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);
|
|
// }
|
|
// }
|