[dyad] Add custom filename input - wrote 1 file(s)

src/components/image-converter.tsx

@@ -27,6 +27,7 @@ import { cn } from "@/lib/utils";
 export function ImageConverter() {
   const [images, setImages] = useState<File[]>([]);
   const [previewUrls, setPreviewUrls] = useState<string[]>([]);
+  const [filenames, setFilenames] = useState<string[]>([]);
   const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(
     null
   );
@@ -75,9 +76,14 @@ export function ImageConverter() {
       ...previewUrls,
       ...imageFiles.map((file) => URL.createObjectURL(file)),
     ];
+    const newFilenames = [
+      ...filenames,
+      ...imageFiles.map(file => file.name.substring(0, file.name.lastIndexOf('.')))
+    ];
 
     setImages(newImages);
     setPreviewUrls(newPreviewUrls);
+    setFilenames(newFilenames);
 
     if (selectedImageIndex === null) {
       setSelectedImageIndex(images.length);
@@ -110,9 +116,11 @@ export function ImageConverter() {
     URL.revokeObjectURL(previewUrls[indexToRemove]);
     const newImages = images.filter((_, i) => i !== indexToRemove);
     const newPreviewUrls = previewUrls.filter((_, i) => i !== indexToRemove);
+    const newFilenames = filenames.filter((_, i) => i !== indexToRemove);
 
     setImages(newImages);
     setPreviewUrls(newPreviewUrls);
+    setFilenames(newFilenames);
 
     if (selectedImageIndex === indexToRemove) {
       setSelectedImageIndex(newImages.length > 0 ? Math.max(0, indexToRemove - 1) : null);
@@ -125,15 +133,27 @@ export function ImageConverter() {
     previewUrls.forEach((url) => URL.revokeObjectURL(url));
     setImages([]);
     setPreviewUrls([]);
+    setFilenames([]);
     setSelectedImageIndex(null);
     toast.info("All images cleared.");
   };
 
+  const handleFilenameChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (selectedImageIndex === null) return;
+    const newFilenames = [...filenames];
+    newFilenames[selectedImageIndex] = e.target.value;
+    setFilenames(newFilenames);
+  };
+
   const handleConvertAndDownload = () => {
     if (selectedImageIndex === null || !width || !height) {
       toast.error("Please select an image and set dimensions.");
       return;
     }
+    if (!filenames[selectedImageIndex] || filenames[selectedImageIndex].trim() === "") {
+      toast.error("Please enter a filename.");
+      return;
+    }
 
     setIsConverting(true);
     const image = images[selectedImageIndex];
@@ -153,8 +173,8 @@ export function ImageConverter() {
         const dataUrl = canvas.toDataURL(`image/${format}`);
         const link = document.createElement("a");
         link.href = dataUrl;
-        const originalName = image.name.substring(0, image.name.lastIndexOf('.'));
+        const customName = filenames[selectedImageIndex];
-        link.download = `${originalName}_${width}x${height}.${format}`;
+        link.download = `${customName}_${width}x${height}.${format}`;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
@@ -205,6 +225,17 @@ export function ImageConverter() {
                 </SelectContent>
               </Select>
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="filename">Filename</Label>
+              <Input
+                id="filename"
+                type="text"
+                placeholder="Enter filename"
+                value={isImageSelected ? filenames[selectedImageIndex] : ""}
+                onChange={handleFilenameChange}
+                disabled={!isImageSelected}
+              />
+            </div>
           </CardContent>
           <CardFooter className="flex justify-between">
             <Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload Images</Button>