media: added more mime types, added mime type check on dropzone

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;
       }