diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx index 2287a63..ecb713d 100644 --- a/src/components/image-converter.tsx +++ b/src/components/image-converter.tsx @@ -27,6 +27,7 @@ import { cn } from "@/lib/utils"; export function ImageConverter() { const [images, setImages] = useState([]); const [previewUrls, setPreviewUrls] = useState([]); + const [filenames, setFilenames] = useState([]); const [selectedImageIndex, setSelectedImageIndex] = useState( 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) => { + 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('.')); - link.download = `${originalName}_${width}x${height}.${format}`; + const customName = filenames[selectedImageIndex]; + link.download = `${customName}_${width}x${height}.${format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); @@ -205,6 +225,17 @@ export function ImageConverter() { +
+ + +