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) => {
+    async (files: File[]) => {
-      if (!files || files.length === 0) return;
+      if (files.length === 0) return;
       setIsUploading(true);
       setAddOpen(false);
       try {
-        for (const file of Array.from(files)) {
+        for (const file of files) {
-          const formData = new FormData();
+          try {
-          formData.append("image", file);
+            const formData = new FormData();
-          const res = await axios.post("/api/import/upload-image", formData);
+            formData.append("image", file);
-          if (res.data?.imageUrl) {
+            const res = await axios.post("/api/import/upload-image", formData);
-            addNewImage(res.data.imageUrl);
+            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,71 +426,76 @@ export function ImageManager({
             ))}
 
             {/* Add button with file drop */}
-            <Popover open={addOpen} onOpenChange={setAddOpen}>
+            <div
-              <PopoverTrigger asChild>
+              {...getRootProps()}
-                <button
+              className={cn(
-                  type="button"
+                "rounded-md border-2 border-dashed transition-colors",
-                  disabled={isUploading}
+                isDragActive
-                  onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+                  ? "border-primary bg-primary/10"
-                  onDragLeave={() => setIsDragOver(false)}
+                  : "border-muted-foreground/25 hover:border-muted-foreground/50"
-                  onDrop={(e) => {
+              )}
-                    e.preventDefault();
+            >
-                    setIsDragOver(false);
+              <input {...getInputProps()} />
-                    handleFileUpload(e.dataTransfer.files);
+              <Popover open={addOpen} onOpenChange={setAddOpen}>
-                  }}
+                <PopoverTrigger asChild>
-                  className={cn(
+                  <button
-                    "rounded-md border-2 border-dashed flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
+                    type="button"
-                    isDragOver
+                    disabled={isUploading}
-                      ? "border-primary bg-primary/10 text-primary"
+                    className={cn(
-                      : "border-muted-foreground/25 hover:border-muted-foreground/50"
+                      "w-full h-full flex items-center justify-center transition-colors",
-                  )}
+                      isDragActive
-                >
+                        ? "text-primary"
-                  {isUploading ? (
+                        : "text-muted-foreground hover:text-foreground"
-                    <Loader2 className="h-4 w-4 animate-spin" />
+                    )}
-                  ) : (
+                  >
-                    <Plus className="h-5 w-5" />
+                    {isUploading ? (
-                  )}
+                      <Loader2 className="h-4 w-4 animate-spin" />
-                </button>
+                    ) : (
-              </PopoverTrigger>
+                      <Plus className="h-5 w-5" />
-              <PopoverContent className="w-64 p-3 space-y-2" align="start">
+                    )}
-                <Button
+                  </button>
-                  type="button"
+                </PopoverTrigger>
-                  variant="outline"
+                <PopoverContent className="w-64 p-3 space-y-2" align="start">
-                  size="sm"
-                  className="w-full justify-start gap-2"
-                  onClick={() => {
-                    fileInputRef.current?.click();
-                  }}
-                >
-                  <Upload className="h-4 w-4" />
-                  Upload Image
-                </Button>
-                <div className="flex gap-1.5 items-center">
-                  <Link className="h-4 w-4 text-muted-foreground shrink-0" />
-                  <Input
-                    placeholder="Image URL..."
-                    value={urlInput}
-                    onChange={(e) => setUrlInput(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        handleUrlAdd();
-                      }
-                    }}
-                    className="text-sm h-7"
-                  />
                   <Button
                     type="button"
+                    variant="outline"
                     size="sm"
-                    onClick={handleUrlAdd}
+                    className="w-full justify-start gap-2"
-                    disabled={!urlInput.trim()}
+                    onClick={() => {
-                    className="h-7 px-2 shrink-0"
+                      setAddOpen(false);
+                      openFilePicker();
+                    }}
                   >
-                    Add
+                    <Upload className="h-4 w-4" />
+                    Upload Image
                   </Button>
-                </div>
+                  <div className="flex gap-1.5 items-center">
-              </PopoverContent>
+                    <Link className="h-4 w-4 text-muted-foreground shrink-0" />
-            </Popover>
+                    <Input
+                      placeholder="Image URL..."
+                      value={urlInput}
+                      onChange={(e) => setUrlInput(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleUrlAdd();
+                        }
+                      }}
+                      className="text-sm h-7"
+                    />
+                    <Button
+                      type="button"
+                      size="sm"
+                      onClick={handleUrlAdd}
+                      disabled={!urlInput.trim()}
+                      className="h-7 px-2 shrink-0"
+                    >
+                      Add
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </SortableContext>
         <DragOverlay>
@@ -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";
-
+import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";
-const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
 
 interface GenericDropzoneProps {
   processingBulk: boolean;
@@ -22,16 +21,14 @@ export const GenericDropzone = ({
   onShowUnassigned
 }: GenericDropzoneProps) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
+    accept: IMAGE_UPLOAD_ACCEPT,
-      'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.tif', '.tiff']
-    },
     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";
-
+import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";
-const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
 
 interface ImageDropzoneProps {
   productIndex: number;
@@ -12,9 +11,7 @@ interface ImageDropzoneProps {
 
 export const ImageDropzone = ({ onDrop }: ImageDropzoneProps) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
+    accept: IMAGE_UPLOAD_ACCEPT,
-      'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.tif', '.tiff']
-    },
     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"],
+};