Image upload consolidation

inventory/src/components/product-editor/ImageManager.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import axios from "axios";
 import { toast } from "sonner";
+import { useDropzone } from "react-dropzone";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -24,6 +25,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";
 import {
   DndContext,
   closestCenter,
@@ -222,8 +224,6 @@ export function ImageManager({
   const [urlInput, setUrlInput] = useState("");
   const [isUploading, setIsUploading] = useState(false);
   const [addOpen, setAddOpen] = useState(false);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -296,29 +296,51 @@ export function ImageManager({
   );
 
   const handleFileUpload = useCallback(
-    async (files: FileList | null) => {
-      if (!files || files.length === 0) return;
+    async (files: File[]) => {
+      if (files.length === 0) return;
       setIsUploading(true);
       setAddOpen(false);
       try {
-        for (const file of Array.from(files)) {
+        for (const file of files) {
+          try {
             const formData = new FormData();
             formData.append("image", file);
             const res = await axios.post("/api/import/upload-image", formData);
             if (res.data?.imageUrl) {
               addNewImage(res.data.imageUrl);
             }
+          } catch (err) {
+            const serverMessage =
+              (err as { response?: { data?: { error?: string } } })?.response?.data?.error;
+            toast.error(`Failed to upload ${file.name}${serverMessage ? `: ${serverMessage}` : ""}`);
+          }
         }
-      } catch {
-        toast.error("Failed to upload image");
       } finally {
         setIsUploading(false);
-        if (fileInputRef.current) fileInputRef.current.value = "";
       }
     },
     [addNewImage]
   );
 
+  const { getRootProps, getInputProps, isDragActive, open: openFilePicker } = useDropzone({
+    accept: IMAGE_UPLOAD_ACCEPT,
+    maxSize: MAX_UPLOAD_BYTES,
+    multiple: true,
+    noClick: true,
+    noKeyboard: true,
+    disabled: isUploading,
+    onDrop: handleFileUpload,
+    onDropRejected: (rejections) => {
+      rejections.forEach((rejection) => {
+        const tooLarge = rejection.errors.some((e) => e.code === "file-too-large");
+        const reason = tooLarge
+          ? `larger than ${formatUploadLimitMb()} limit`
+          : rejection.errors[0]?.message ?? "rejected";
+        toast.error(`${rejection.file.name}: ${reason}`);
+      });
+    },
+  });
+
   const handleUrlAdd = useCallback(async () => {
     const url = urlInput.trim();
     if (!url) return;
@@ -404,23 +426,26 @@ export function ImageManager({
             ))}
 
             {/* Add button with file drop */}
+            <div
+              {...getRootProps()}
+              className={cn(
+                "rounded-md border-2 border-dashed transition-colors",
+                isDragActive
+                  ? "border-primary bg-primary/10"
+                  : "border-muted-foreground/25 hover:border-muted-foreground/50"
+              )}
+            >
+              <input {...getInputProps()} />
               <Popover open={addOpen} onOpenChange={setAddOpen}>
                 <PopoverTrigger asChild>
                   <button
                     type="button"
                     disabled={isUploading}
-                  onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
-                  onDragLeave={() => setIsDragOver(false)}
-                  onDrop={(e) => {
-                    e.preventDefault();
-                    setIsDragOver(false);
-                    handleFileUpload(e.dataTransfer.files);
-                  }}
                     className={cn(
-                    "rounded-md border-2 border-dashed flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
-                    isDragOver
-                      ? "border-primary bg-primary/10 text-primary"
-                      : "border-muted-foreground/25 hover:border-muted-foreground/50"
+                      "w-full h-full flex items-center justify-center transition-colors",
+                      isDragActive
+                        ? "text-primary"
+                        : "text-muted-foreground hover:text-foreground"
                     )}
                   >
                     {isUploading ? (
@@ -437,7 +462,8 @@ export function ImageManager({
                     size="sm"
                     className="w-full justify-start gap-2"
                     onClick={() => {
-                    fileInputRef.current?.click();
+                      setAddOpen(false);
+                      openFilePicker();
                     }}
                   >
                     <Upload className="h-4 w-4" />
@@ -470,6 +496,7 @@ export function ImageManager({
                 </PopoverContent>
               </Popover>
             </div>
+          </div>
         </SortableContext>
         <DragOverlay>
           {activeImage ? (
@@ -484,16 +511,6 @@ export function ImageManager({
         </DragOverlay>
       </DndContext>
 
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        multiple
-        className="hidden"
-        onChange={(e) => handleFileUpload(e.target.files)}
-      />
-
       {/* Full-size image overlay */}
       <Dialog open={!!zoomImage} onOpenChange={(open) => !open && setZoomImage(null)}>
         <DialogContent className="max-w-3xl p-2">

inventory/src/components/product-import/steps/ImageUploadStep/components/GenericDropzone.tsx

@@ -3,8 +3,7 @@ import { Loader2, Upload } from "lucide-react";
 import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-
-const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
+import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";
 
 interface GenericDropzoneProps {
   processingBulk: boolean;
@@ -22,16 +21,14 @@ export const GenericDropzone = ({
   onShowUnassigned
 }: GenericDropzoneProps) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
-      'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.tif', '.tiff']
-    },
+    accept: IMAGE_UPLOAD_ACCEPT,
     maxSize: MAX_UPLOAD_BYTES,
     onDrop,
     onDropRejected: (rejections) => {
       rejections.forEach((rejection) => {
         const tooLarge = rejection.errors.some((e) => e.code === 'file-too-large');
         const reason = tooLarge
-          ? `larger than ${MAX_UPLOAD_BYTES / 1024 / 1024}MB limit`
+          ? `larger than ${formatUploadLimitMb()} limit`
           : rejection.errors[0]?.message ?? 'rejected';
         toast.error(`${rejection.file.name}: ${reason}`);
       });

inventory/src/components/product-import/steps/ImageUploadStep/components/ProductCard/ImageDropzone.tsx

@@ -2,8 +2,7 @@ import { Upload } from "lucide-react";
 import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-
-const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
+import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";
 
 interface ImageDropzoneProps {
   productIndex: number;
@@ -12,9 +11,7 @@ interface ImageDropzoneProps {
 
 export const ImageDropzone = ({ onDrop }: ImageDropzoneProps) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
-      'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.tif', '.tiff']
-    },
+    accept: IMAGE_UPLOAD_ACCEPT,
     maxSize: MAX_UPLOAD_BYTES,
     onDrop: (acceptedFiles) => {
       onDrop(acceptedFiles);
@@ -23,7 +20,7 @@ export const ImageDropzone = ({ onDrop }: ImageDropzoneProps) => {
       rejections.forEach((rejection) => {
         const tooLarge = rejection.errors.some((e) => e.code === 'file-too-large');
         const reason = tooLarge
-          ? `larger than ${MAX_UPLOAD_BYTES / 1024 / 1024}MB limit`
+          ? `larger than ${formatUploadLimitMb()} limit`
           : rejection.errors[0]?.message ?? 'rejected';
         toast.error(`${rejection.file.name}: ${reason}`);
       });

inventory/src/config/uploads.ts

@@ -0,0 +1,7 @@
+export const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
+
+export const formatUploadLimitMb = () => `${MAX_UPLOAD_BYTES / 1024 / 1024}MB`;
+
+export const IMAGE_UPLOAD_ACCEPT: Record<string, string[]> = {
+  "image/*": [".jpeg", ".jpg", ".png", ".gif", ".webp", ".tif", ".tiff"],
+};