diff --git a/app/__test__/core/utils.spec.ts b/app/__test__/core/utils.spec.ts index 36b4969..66d289e 100644 --- a/app/__test__/core/utils.spec.ts +++ b/app/__test__/core/utils.spec.ts @@ -264,6 +264,35 @@ describe("Core Utils", async () => { height: 512, }); }); + + test("isFileAccepted", () => { + const file = new File([""], "file.txt", { + type: "text/plain", + }); + expect(utils.isFileAccepted(file, "text/plain")).toBe(true); + expect(utils.isFileAccepted(file, "text/plain,text/html")).toBe(true); + expect(utils.isFileAccepted(file, "text/html")).toBe(false); + + { + const file = new File([""], "file.jpg", { + type: "image/jpeg", + }); + expect(utils.isFileAccepted(file, "image/jpeg")).toBe(true); + expect(utils.isFileAccepted(file, "image/jpeg,image/png")).toBe(true); + expect(utils.isFileAccepted(file, "image/png")).toBe(false); + expect(utils.isFileAccepted(file, "image/*")).toBe(true); + expect(utils.isFileAccepted(file, ".jpg")).toBe(true); + expect(utils.isFileAccepted(file, ".jpg,.png")).toBe(true); + expect(utils.isFileAccepted(file, ".png")).toBe(false); + } + + { + const file = new File([""], "file.png"); + expect(utils.isFileAccepted(file, undefined as any)).toBe(true); + } + + expect(() => utils.isFileAccepted(null as any, "text/plain")).toThrow(); + }); }); describe("dates", () => { diff --git a/app/src/core/utils/file.ts b/app/src/core/utils/file.ts index 8e812cf..a2093c0 100644 --- a/app/src/core/utils/file.ts +++ b/app/src/core/utils/file.ts @@ -240,3 +240,46 @@ export async function blobToFile( lastModified: Date.now(), }); } + +export function isFileAccepted(file: File | unknown, _accept: string | string[]): boolean { + const accept = Array.isArray(_accept) ? _accept.join(",") : _accept; + if (!accept || !accept.trim()) return true; // no restrictions + if (!isFile(file)) { + throw new Error("Given file is not a File instance"); + } + + const name = file.name.toLowerCase(); + const type = (file.type || "").trim().toLowerCase(); + + // split on commas, trim whitespace + const tokens = accept + .split(",") + .map((t) => t.trim().toLowerCase()) + .filter(Boolean); + + // try each token until one matches + return tokens.some((token) => { + if (token.startsWith(".")) { + // extension match, e.g. ".png" or ".tar.gz" + return name.endsWith(token); + } + + const slashIdx = token.indexOf("/"); + if (slashIdx !== -1) { + const [major, minor] = token.split("/"); + if (minor === "*") { + // wildcard like "image/*" + if (!type) return false; + const [fMajor] = type.split("/"); + return fMajor === major; + } else { + // exact MIME like "image/svg+xml" or "application/pdf" + // because of "text/plain;charset=utf-8" + return type.startsWith(token); + } + } + + // unknown token shape, ignore + return false; + }); +} diff --git a/app/src/ui/elements/media/Dropzone.tsx b/app/src/ui/elements/media/Dropzone.tsx index ffaa5df..b7cb384 100644 --- a/app/src/ui/elements/media/Dropzone.tsx +++ b/app/src/ui/elements/media/Dropzone.tsx @@ -9,8 +9,8 @@ import { useEffect, useMemo, useRef, - useState, } from "react"; +import { isFileAccepted } from "bknd/utils"; import { type FileWithPath, useDropzone } from "./use-dropzone"; import { checkMaxReached } from "./helper"; import { DropzoneInner } from "./DropzoneInner"; @@ -173,12 +173,14 @@ export function Dropzone({ return specs.every((spec) => { if (spec.kind !== "file") { - console.log("not a file", spec.kind); + console.warn("file not accepted: not a file", spec.kind); return false; } if (allowedMimeTypes && allowedMimeTypes.length > 0) { - console.log("not allowed mimetype", spec.type); - return allowedMimeTypes.includes(spec.type); + if (!isFileAccepted(i, allowedMimeTypes)) { + console.warn("file not accepted: not allowed mimetype", spec.type); + return false; + } } return true; });