[dyad] Add batch filename settings panel - wrote 1 file(s)
This commit is contained in:
[dyad]
@@ -23,14 +23,21 @@ import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Upload, Download, X, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
||||
export function ImageConverter() {
|
||||
const [images, setImages] = useState<File[]>([]);
|
||||
const [previewUrls, setPreviewUrls] = useState<string[]>([]);
|
||||
const [filenames, setFilenames] = useState<string[]>([]);
|
||||
const [originalFilenames, setOriginalFilenames] = useState<string[]>([]);
|
||||
const [width, setWidth] = useState<number | string>("");
|
||||
const [height, setHeight] = useState<number | string>("");
|
||||
const [format, setFormat] = useState<"png" | "jpeg" | "webp">("png");
|
||||
|
||||
const [prefix, setPrefix] = useState<string>("");
|
||||
const [suffix, setSuffix] = useState<string>("");
|
||||
const [useCounter, setUseCounter] = useState<boolean>(true);
|
||||
const [counterDigits, setCounterDigits] = useState<number>(3);
|
||||
|
||||
const [isConverting, setIsConverting] = useState(false);
|
||||
const [isDraggingOver, setIsDraggingOver] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -58,8 +65,8 @@ export function ImageConverter() {
|
||||
...previewUrls,
|
||||
...imageFiles.map((file) => URL.createObjectURL(file)),
|
||||
];
|
||||
const newFilenames = [
|
||||
...filenames,
|
||||
const newOriginalFilenames = [
|
||||
...originalFilenames,
|
||||
...imageFiles.map((file) =>
|
||||
file.name.substring(0, file.name.lastIndexOf("."))
|
||||
),
|
||||
@@ -67,7 +74,7 @@ export function ImageConverter() {
|
||||
|
||||
setImages(newImages);
|
||||
setPreviewUrls(newPreviewUrls);
|
||||
setFilenames(newFilenames);
|
||||
setOriginalFilenames(newOriginalFilenames);
|
||||
|
||||
toast.success(`${imageFiles.length} image(s) added.`);
|
||||
};
|
||||
@@ -97,28 +104,28 @@ 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);
|
||||
const newOriginalFilenames = originalFilenames.filter((_, i) => i !== indexToRemove);
|
||||
|
||||
setImages(newImages);
|
||||
setPreviewUrls(newPreviewUrls);
|
||||
setFilenames(newFilenames);
|
||||
setOriginalFilenames(newOriginalFilenames);
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
previewUrls.forEach((url) => URL.revokeObjectURL(url));
|
||||
setImages([]);
|
||||
setPreviewUrls([]);
|
||||
setFilenames([]);
|
||||
setOriginalFilenames([]);
|
||||
toast.info("All images cleared.");
|
||||
};
|
||||
|
||||
const handleFilenameChange = (
|
||||
e: ChangeEvent<HTMLInputElement>,
|
||||
index: number
|
||||
) => {
|
||||
const newFilenames = [...filenames];
|
||||
newFilenames[index] = e.target.value;
|
||||
setFilenames(newFilenames);
|
||||
const generateFinalFilename = (index: number) => {
|
||||
if (useCounter) {
|
||||
const counter = (index + 1).toString().padStart(counterDigits, '0');
|
||||
return `${prefix}${counter}${suffix}`;
|
||||
}
|
||||
const originalName = originalFilenames[index] || "filename";
|
||||
return `${prefix}${originalName}${suffix}`;
|
||||
};
|
||||
|
||||
const handleConvertAndDownload = async () => {
|
||||
@@ -127,11 +134,6 @@ export function ImageConverter() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (filenames.some((name) => name.trim() === "")) {
|
||||
toast.error("Please ensure all images have a filename.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConverting(true);
|
||||
toast.info(`Starting conversion for ${images.length} images...`);
|
||||
|
||||
@@ -153,8 +155,8 @@ export function ImageConverter() {
|
||||
const dataUrl = canvas.toDataURL(`image/${format}`);
|
||||
const link = document.createElement("a");
|
||||
link.href = dataUrl;
|
||||
const customName = filenames[index];
|
||||
link.download = `${customName}_${width}x${height}.${format}`;
|
||||
const finalFilename = generateFinalFilename(index);
|
||||
link.download = `${finalFilename}_${width}x${height}.${format}`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
@@ -226,6 +228,41 @@ export function ImageConverter() {
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Filename Settings</CardTitle>
|
||||
<CardDescription>Customize the output filenames.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="prefix">Prefix</Label>
|
||||
<Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} disabled={!hasImages} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="suffix">Suffix</Label>
|
||||
<Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} disabled={!hasImages} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 pt-2">
|
||||
<Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} disabled={!hasImages} />
|
||||
<Label htmlFor="use-counter">Add sequential number</Label>
|
||||
</div>
|
||||
{useCounter && (
|
||||
<div className="space-y-2 pl-8">
|
||||
<Label htmlFor="counter-digits">Number of digits</Label>
|
||||
<Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))} disabled={!hasImages}>
|
||||
<SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1 (e.g., 1)</SelectItem>
|
||||
<SelectItem value="2">2 (e.g., 01)</SelectItem>
|
||||
<SelectItem value="3">3 (e.g., 001)</SelectItem>
|
||||
<SelectItem value="4">4 (e.g., 0001)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 flex flex-col gap-8">
|
||||
@@ -261,14 +298,13 @@ export function ImageConverter() {
|
||||
{previewUrls.map((url, index) => (
|
||||
<div key={url} className="p-4 border rounded-lg flex items-center gap-4">
|
||||
<img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />
|
||||
<div className="flex-1 space-y-2 min-w-0">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate text-gray-700 dark:text-gray-300" title={images[index].name}>
|
||||
Source: {images[index].name}
|
||||
{images[index].name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate" title={`${generateFinalFilename(index)}_${width || 'w'}x${height || 'h'}.${format}`}>
|
||||
New name: {generateFinalFilename(index)}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor={`filename-${index}`} className="text-xs font-semibold">New Filename</Label>
|
||||
<Input id={`filename-${index}`} type="text" placeholder="Enter new filename" value={filenames[index]} onChange={(e) => handleFilenameChange(e, index)} />
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="shrink-0 text-gray-500 hover:text-destructive" onClick={() => handleRemoveImage(index)}>
|
||||
<X className="h-4 w-4" />
|
||||
|
||||
Reference in New Issue
Block a user