diff --git a/src/components/submit-form/index.tsx b/src/components/submit-form/index.tsx
index 6e26196..ff59a47 100644
--- a/src/components/submit-form/index.tsx
+++ b/src/components/submit-form/index.tsx
@@ -228,7 +228,7 @@ export default function SubmitForm() {
+
Drag and drop your images here
@@ -236,6 +236,8 @@ export default function SubmitForm() {
or click to open
+
+
Animated images currently not supported.
diff --git a/src/lib/images.tsx b/src/lib/images.tsx
index 2e0fee8..7201173 100644
--- a/src/lib/images.tsx
+++ b/src/lib/images.tsx
@@ -1,5 +1,5 @@
-// This file's extension is .tsx because I am using JSX for satori to generate images
-// These are disabled because satori is not Next.JS and is turned into an image anyways
+// This file's extension is .tsx because JSX is used for satori to generate images
+// Warnings below are disabled since satori is not Next.JS and is turned into an image anyways
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
@@ -14,9 +14,9 @@ import satori, { Font } from "satori";
import { Mii } from "@prisma/client";
-const MIN_IMAGE_DIMENSIONS = 128;
-const MAX_IMAGE_DIMENSIONS = 1024;
-const MAX_IMAGE_SIZE = 1024 * 1024; // 1 MB
+const MIN_IMAGE_DIMENSIONS = [128, 128];
+const MAX_IMAGE_DIMENSIONS = [1920, 1080];
+const MAX_IMAGE_SIZE = 4 * 1024 * 1024; // 4 MB
const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
//#region Image validation
@@ -43,12 +43,12 @@ export async function validateImage(file: File): Promise<{ valid: boolean; error
if (
!metadata.width ||
!metadata.height ||
- metadata.width < MIN_IMAGE_DIMENSIONS ||
- metadata.width > MAX_IMAGE_DIMENSIONS ||
- metadata.height < MIN_IMAGE_DIMENSIONS ||
- metadata.height > MAX_IMAGE_DIMENSIONS
+ metadata.width < MIN_IMAGE_DIMENSIONS[0] ||
+ metadata.width > MAX_IMAGE_DIMENSIONS[0] ||
+ metadata.height < MIN_IMAGE_DIMENSIONS[1] ||
+ metadata.height > MAX_IMAGE_DIMENSIONS[1]
) {
- return { valid: false, error: "Image dimensions are invalid. Width and height must be between 128px and 1024px" };
+ return { valid: false, error: "Image dimensions are invalid. Resolution must be between 128x128 and 1920x1080" };
}
// Check for inappropriate content