fix: include file extensions in accept attribute for better cross-browser compatibility

Populate the extension arrays in generateClientDropzoneAccept() using
the existing @uploadthing/mime-types extension data. This ensures the
HTML <input accept> attribute includes both MIME types and their
corresponding file extensions (e.g. .jar, .war, .ear), which fixes
file picker filtering on Windows/Chrome for types like
application/java-archive.

Closes #1157

Author: TheAbMehta

packages/shared/src/component-utils.ts

@@ -7,6 +7,7 @@ import type { RenderFunction, StyleValue } from "vue";
  * We don't need all the types, and `/application`
  * entrypoint is ~7k gzip which we can shave off
  */
+import { getExtensions } from "@uploadthing/mime-types";
 import { audio } from "@uploadthing/mime-types/audio";
 import { image } from "@uploadthing/mime-types/image";
 import { text } from "@uploadthing/mime-types/text";
@@ -51,7 +52,21 @@ export const generateMimeTypes = (
 
 export const generateClientDropzoneAccept = (fileTypes: string[]) => {
   const mimeTypes = generateMimeTypes(fileTypes);
-  return Object.fromEntries(mimeTypes.map((type) => [type, []]));
+  const extensionsMap = getExtensions();
+
+  return Object.fromEntries(
+    mimeTypes.map((type) => {
+      // Generic types produce comma-joined strings: "image/*, image/png, ..."
+      const subTypes = type.split(",").map((t) => t.trim());
+      const exts = subTypes.flatMap((mime) => {
+        const mimeExts =
+          extensionsMap[mime as keyof typeof extensionsMap] ?? [];
+        return mimeExts.map((ext) => `.${ext}`);
+      });
+
+      return [type, exts];
+    }),
+  );
 };
 
 export function getFilesFromClipboardEvent(event: ClipboardEvent) {

packages/shared/test/component-utils.test.ts

@@ -1,7 +1,10 @@
 import * as E from "effect/Effect";
 import { describe, expect, it } from "vitest";
 
-import { generateMimeTypes } from "../src/component-utils";
+import {
+  generateClientDropzoneAccept,
+  generateMimeTypes,
+} from "../src/component-utils";
 import { fillInputRouteConfig } from "../src/utils";
 
 describe("generateMimeTypes", () => {
@@ -38,3 +41,56 @@ describe("generateMimeTypes", () => {
     expect(videoMimes).toContain("video/webm");
   });
 });
+
+describe("generateClientDropzoneAccept", () => {
+  it("includes file extensions for specific MIME types", () => {
+    const result = generateClientDropzoneAccept(["application/java-archive"]);
+    expect(result).toEqual({
+      "application/java-archive": [".jar", ".war", ".ear"],
+    });
+  });
+
+  it("includes file extensions for application/pdf via 'pdf' shorthand", () => {
+    const result = generateClientDropzoneAccept(["pdf"]);
+    expect(result).toEqual({
+      "application/pdf": [".pdf"],
+    });
+  });
+
+  it("returns empty object for blob type", () => {
+    const result = generateClientDropzoneAccept(["blob"]);
+    expect(result).toEqual({});
+  });
+
+  it("includes extensions for generic types like 'image'", () => {
+    const result = generateClientDropzoneAccept(["image"]);
+    const keys = Object.keys(result);
+    expect(keys).toHaveLength(1);
+
+    const extensions = Object.values(result)[0]!;
+    expect(extensions).toContain(".png");
+    expect(extensions).toContain(".jpg");
+    expect(extensions).toContain(".gif");
+    expect(extensions).toContain(".webp");
+  });
+
+  it("handles MIME types with no known extensions gracefully", () => {
+    const result = generateClientDropzoneAccept(["application/x-unknown-type"]);
+    expect(result).toEqual({
+      "application/x-unknown-type": [],
+    });
+  });
+
+  it("handles multiple file types", () => {
+    const result = generateClientDropzoneAccept([
+      "application/java-archive",
+      "pdf",
+    ]);
+    expect(result["application/java-archive"]).toEqual([
+      ".jar",
+      ".war",
+      ".ear",
+    ]);
+    expect(result["application/pdf"]).toEqual([".pdf"]);
+  });
+});