Merge pull request #95 from bknd-io/feat/media-more-mime-and-add-dropzone-checker

media more mime types and add dropzone mime checker

app/src/media/storage/mime-types-tiny.ts

@@ -1,7 +1,7 @@
 export const Q = {
    video: ["mp4", "webm"],
    audio: ["ogg"],
-   image: ["jpeg", "png", "gif", "webp", "bmp", "tiff"],
+   image: ["jpeg", "png", "gif", "webp", "bmp", "tiff", "avif", "heic", "heif"],
    text: ["html", "css", "mdx", "yaml", "vcard", "csv", "vtt"],
    application: ["zip", "xml", "toml", "json", "json5"],
    font: ["woff", "woff2", "ttf", "otf"]
@@ -76,7 +76,8 @@ export function guess(f: string): string {
    }
 }
 
-export function isMimeType(mime: any, exclude: string[] = []) {
+export function isMimeType(_mime: any, exclude: string[] = []) {
+   const mime = _mime.toLowerCase();
    if (exclude.includes(mime)) return false;
 
    // try quick first
@@ -96,7 +97,9 @@ export function isMimeType(mime: any, exclude: string[] = []) {
    return false;
 }
 
-export function extension(mime: string) {
+export function extension(_mime: string) {
+   const mime = _mime.toLowerCase();
+
    for (const [t, e] of Object.entries(Q)) {
       for (const _e of e) {
          if (mime === `${t}/${_e}`) {

app/src/media/utils/index.ts

@@ -5,7 +5,7 @@ export function getExtensionFromName(filename: string): string | undefined {
    if (!filename.includes(".")) return;
 
    const parts = filename.split(".");
-   return parts[parts.length - 1];
+   return parts[parts.length - 1]?.toLowerCase();
 }
 
 export function getRandomizedFilename(file: File, length?: number): string;

app/src/ui/elements/media/Dropzone.tsx

@@ -49,6 +49,7 @@ export type DropzoneProps = {
    initialItems?: FileState[];
    flow?: "start" | "end";
    maxItems?: number;
+   allowedMimeTypes?: string[];
    overwrite?: boolean;
    autoUpload?: boolean;
    onRejected?: (files: FileWithPath[]) => void;
@@ -75,6 +76,7 @@ export function Dropzone({
    handleDelete,
    initialItems = [],
    flow = "start",
+   allowedMimeTypes,
    maxItems,
    overwrite,
    autoUpload,
@@ -109,8 +111,26 @@ export function Dropzone({
       return added > remaining;
    }
 
+   function isAllowed(i: DataTransferItem | DataTransferItem[] | File | File[]): boolean {
+      const items = Array.isArray(i) ? i : [i];
+      const specs = items.map((item) => ({
+         kind: "kind" in item ? item.kind : "file",
+         type: item.type,
+         size: "size" in item ? item.size : 0
+      }));
+
+      return specs.every((spec) => {
+         if (spec.kind !== "file") {
+            return false;
+         }
+         return !(allowedMimeTypes && !allowedMimeTypes.includes(spec.type));
+      });
+   }
+
    const { isOver, handleFileInputChange, ref } = useDropzone({
       onDropped: (newFiles: FileWithPath[]) => {
+         if (!isAllowed(newFiles)) return;
+
          let to_drop = 0;
          const added = newFiles.length;
 
@@ -155,6 +175,11 @@ export function Dropzone({
          }
       },
       onOver: (items) => {
+         if (!isAllowed(items)) {
+            setIsOverAccepted(false);
+            return;
+         }
+
          const max_reached = isMaxReached(items.length);
          setIsOverAccepted(!max_reached);
       },

app/src/ui/elements/media/DropzoneContainer.tsx

@@ -81,7 +81,9 @@ export function DropzoneContainer({
       return api.media.deleteFile(file.path);
    });
 
-   const actualItems = (initialItems || $q.data || []) as MediaFieldSchema[];
+   const actualItems = (initialItems ??
+      (Array.isArray($q.data) ? $q.data : []) ??
+      []) as MediaFieldSchema[];
    const _initialItems = mediaItemsToFileStates(actualItems, { baseUrl });
 
    const key = id + JSON.stringify(_initialItems);

app/src/ui/elements/media/file-selector.ts

@@ -80,10 +80,8 @@ export interface FileWithPath extends File {
 export async function fromEvent(evt: Event | any): Promise<(FileWithPath | DataTransferItem)[]> {
    if (isObject<DragEvent>(evt) && isDataTransfer(evt.dataTransfer)) {
       return getDataTransferFiles(evt.dataTransfer, evt.type);
-      // biome-ignore lint/style/noUselessElse: not useless
    } else if (isChangeEvt(evt)) {
       return getInputFiles(evt);
-      // biome-ignore lint/style/noUselessElse: not useless
    } else if (
       Array.isArray(evt) &&
       evt.every((item) => "getFile" in item && typeof item.getFile === "function")

app/src/ui/elements/media/use-dropzone.ts

@@ -3,13 +3,13 @@ import { type FileWithPath, fromEvent } from "./file-selector";
 
 type DropzoneProps = {
    onDropped: (files: FileWithPath[]) => void;
-   onOver?: (items: DataTransferItem[]) => void;
+   onOver?: (items: DataTransferItem[], event: DragEvent) => void;
    onLeave?: () => void;
 };
 
 const events = {
-   enter: ["dragenter", "dragover", "dragstart"],
-   leave: ["dragleave", "drop"]
+   enter: ["dragenter", "dragover", "dragstart"] as const,
+   leave: ["dragleave", "drop"] as const
 };
 const allEvents = [...events.enter, ...events.leave];
 
@@ -24,10 +24,10 @@ export function useDropzone({ onDropped, onOver, onLeave }: DropzoneProps) {
       e.stopPropagation();
    }, []);
 
-   const toggleHighlight = useCallback(async (e: Event) => {
-      const _isOver = events.enter.includes(e.type);
+   const toggleHighlight = useCallback(async (e: DragEvent) => {
+      const _isOver = events.enter.includes(e.type as any);
       if (onOver && _isOver !== isOver && !onOverCalled.current) {
-         onOver((await fromEvent(e)) as DataTransferItem[]);
+         onOver((await fromEvent(e)) as DataTransferItem[], e);
          onOverCalled.current = true;
       }
 

app/src/ui/routes/test/tests/dropzone-element-test.tsx

@@ -6,6 +6,9 @@ export default function DropzoneElementTest() {
       <Scrollable>
          <div className="flex flex-col w-full h-full p-4 gap-4">
             <div>
+               <b>Dropzone no auto avif only</b>
+               <Media.Dropzone autoUpload={false} allowedMimeTypes={["image/avif"]} />
+
                <b>Dropzone User Avatar 1 (fully customized)</b>
                <Media.Dropzone
                   entity={{ name: "users", id: 1, field: "avatar" }}