Merge pull request #83 from ashim-hq/feat/extended-format-support

feat: extended image format support (JXL, RAW, ICO, TGA, PSD, EXR, HDR)

apps/web/src/components/common/dropzone.tsx

@@ -10,11 +10,11 @@ interface DropzoneProps {
   currentFiles?: File[];
 }
 
-// Browsers may not map .heic/.heif to image/* in file pickers.
+// Browsers may not map certain formats (HEIC, JXL, RAW, etc.) to image/* in file pickers.
 // Append explicit extensions so they are selectable.
 function expandAccept(accept?: string): string | undefined {
   if (!accept?.includes("image/*")) return accept;
-  return `${accept},.heic,.heif,.hif`;
+  return `${accept},.heic,.heif,.hif,.jxl,.ico,.dng,.cr2,.nef,.arw,.orf,.rw2,.tga,.psd,.exr,.hdr`;
 }
 
 export function Dropzone({ onFiles, accept, multiple = true, currentFiles = [] }: DropzoneProps) {

apps/web/src/components/files/file-upload-area.tsx

@@ -57,7 +57,7 @@ export function FileUploadArea() {
         </div>
         <input
           type="file"
-          accept="image/*,.heic,.heif,.hif"
+          accept="image/*,.heic,.heif,.hif,.jxl,.dng,.cr2,.nef,.arw,.orf,.rw2,.tga,.psd,.exr,.hdr"
           multiple
           className="hidden"
           onChange={handleInputChange}

apps/web/src/lib/image-preview.ts

@@ -1,10 +1,19 @@
 import { formatHeaders } from "@/lib/api";
 
-const HEIF_EXTENSIONS = new Set(["heic", "heif", "hif"]);
+const SERVER_PREVIEW_EXTENSIONS = new Set([
+  "heic", "heif", "hif",                       // HEIF
+  "jxl",                                         // JPEG XL (Chrome dropped support)
+  "ico",                                         // ICO (Sharp can't decode)
+  "dng", "cr2", "nef", "arw", "orf", "rw2",     // Camera RAW
+  "tga",                                         // Targa
+  "psd",                                         // Photoshop
+  "exr",                                         // OpenEXR
+  "hdr",                                         // Radiance HDR
+]);
 
 export function needsServerPreview(file: File): boolean {
   const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
-  return HEIF_EXTENSIONS.has(ext);
+  return SERVER_PREVIEW_EXTENSIONS.has(ext);
 }
 
 export async function fetchDecodedPreview(file: File): Promise<string | null> {

apps/web/src/pages/tool-page.tsx

@@ -45,7 +45,6 @@ const BROWSER_PREVIEWABLE_EXTS = new Set([
   "webp",
   "svg",
   "bmp",
-  "ico",
   "avif",
 ]);
 
@@ -251,7 +250,7 @@ export function ToolPage() {
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = true;
-    input.accept = "image/*,.heic,.heif,.hif";
+    input.accept = "image/*,.heic,.heif,.hif,.jxl,.dng,.cr2,.nef,.arw,.orf,.rw2,.tga,.psd,.exr,.hdr";
     input.onchange = (e) => {
       const newFiles = Array.from((e.target as HTMLInputElement).files || []);
       if (newFiles.length > 0) addFiles(newFiles);