trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: more lax requirements for custom images

Browse source
This commit is contained in:
trafficlunar 2025-11-12 19:51:18 +00:00
parent 46a168b56c
commit 6386e8a652
2 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/submit-form/index.tsx
View file

@ -228,7 +228,7 @@ export default function SubmitForm() {
<hr className="grow border-zinc-300" /> <hr className="grow border-zinc-300" />
</div> </div>
<div className="max-w-md w-full self-center"> <div className="max-w-md w-full self-center flex flex-col items-center">
<Dropzone onDrop={handleDrop}> <Dropzone onDrop={handleDrop}>
<p className="text-center text-sm"> <p className="text-center text-sm">
Drag and drop your images here Drag and drop your images here
@ -236,6 +236,8 @@ export default function SubmitForm() {
or click to open or click to open
</p> </p>
</Dropzone> </Dropzone>
<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
</div> </div>
<ImageList files={files} setFiles={setFiles} /> <ImageList files={files} setFiles={setFiles} />

20
src/lib/images.tsx
View file

@ -1,5 +1,5 @@
// This file's extension is .tsx because I am using JSX for satori to generate images // This file's extension is .tsx because JSX is used for satori to generate images
// These are disabled because satori is not Next.JS and is turned into an image anyways // 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 jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
@ -14,9 +14,9 @@ import satori, { Font } from "satori";
import { Mii } from "@prisma/client"; import { Mii } from "@prisma/client";
const MIN_IMAGE_DIMENSIONS = 128; const MIN_IMAGE_DIMENSIONS = [128, 128];
const MAX_IMAGE_DIMENSIONS = 1024; const MAX_IMAGE_DIMENSIONS = [1920, 1080];
const MAX_IMAGE_SIZE = 1024 * 1024; // 1 MB const MAX_IMAGE_SIZE = 4 * 1024 * 1024; // 4 MB
const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"]; const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
//#region Image validation //#region Image validation
@ -43,12 +43,12 @@ export async function validateImage(file: File): Promise<{ valid: boolean; error
if ( if (
!metadata.width || !metadata.width ||
!metadata.height || !metadata.height ||
metadata.width < MIN_IMAGE_DIMENSIONS || metadata.width < MIN_IMAGE_DIMENSIONS[0] ||
metadata.width > MAX_IMAGE_DIMENSIONS || metadata.width > MAX_IMAGE_DIMENSIONS[0] ||
metadata.height < MIN_IMAGE_DIMENSIONS || metadata.height < MIN_IMAGE_DIMENSIONS[1] ||
metadata.height > MAX_IMAGE_DIMENSIONS 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 // Check for inappropriate content