pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Enable per-image filename editing - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 11:13:32 +01:00
parent 39410d1aa1
commit db23ab08a8
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/image-converter.tsx
View File

@@ -34,7 +34,7 @@ import {
export function ImageConverter() {
const [images, setImages] = useState<File[]>([]);
const [previewUrls, setPreviewUrls] = useState<string[]>([]);
const [originalFilenames, setOriginalFilenames] = useState<string[]>([]);
const [filenames, setFilenames] = useState<string[]>([]);
const [width, setWidth] = useState<number | string>("");
const [height, setHeight] = useState<number | string>("");
const [format, setFormat] = useState<"png" | "jpeg" | "webp">("png");
@@ -71,8 +71,8 @@ export function ImageConverter() {
...previewUrls,
...imageFiles.map((file) => URL.createObjectURL(file)),
];
const newOriginalFilenames = [
...originalFilenames,
const newFilenames = [
...filenames,
...imageFiles.map((file) =>
file.name.substring(0, file.name.lastIndexOf("."))
),
@@ -80,7 +80,7 @@ export function ImageConverter() {
setImages(newImages);
setPreviewUrls(newPreviewUrls);
setOriginalFilenames(newOriginalFilenames);
setFilenames(newFilenames);
toast.success(`${imageFiles.length} image(s) added.`);
};
@@ -110,28 +110,34 @@ export function ImageConverter() {
URL.revokeObjectURL(previewUrls[indexToRemove]);
const newImages = images.filter((_, i) => i !== indexToRemove);
const newPreviewUrls = previewUrls.filter((_, i) => i !== indexToRemove);
const newOriginalFilenames = originalFilenames.filter((_, i) => i !== indexToRemove);
const newFilenames = filenames.filter((_, i) => i !== indexToRemove);
setImages(newImages);
setPreviewUrls(newPreviewUrls);
setOriginalFilenames(newOriginalFilenames);
setFilenames(newFilenames);
};
const handleClearAll = () => {
previewUrls.forEach((url) => URL.revokeObjectURL(url));
setImages([]);
setPreviewUrls([]);
setOriginalFilenames([]);
setFilenames([]);
toast.info("All images cleared.");
};
const handleFilenameChange = (index: number, newName: string) => {
const newFilenames = [...filenames];
newFilenames[index] = newName;
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 baseName = filenames[index] || "filename";
return `${prefix}${baseName}${suffix}`;
};
const handleConvertAndDownload = async () => {
@@ -319,11 +325,16 @@ export function ImageConverter() {
<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 min-w-0">
<p className="text-sm font-medium truncate text-gray-700 dark:text-gray-300" title={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)}
<Label htmlFor={`filename-${index}`} className="text-xs text-muted-foreground">Base Name</Label>
<Input
id={`filename-${index}`}
value={filenames[index]}
onChange={(e) => handleFilenameChange(index, e.target.value)}
disabled={useCounter}
className="text-sm font-medium h-8 mt-1"
/>
<p className="text-xs text-muted-foreground truncate mt-1" title={`${generateFinalFilename(index)}_${width || 'w'}x${height || 'h'}.${format}`}>
Final name: {generateFinalFilename(index)}.{format}
</p>
</div>
<Button variant="ghost" size="icon" className="shrink-0 text-gray-500 hover:text-destructive" onClick={() => handleRemoveImage(index)}>