shadcn.io is not affiliated with official shadcn/ui
Batch Rename File Upload Block for Vue
A bulk renamer with prefix, suffix, find and replace, letter case and numbering, a live Before and After list, clash detection that blocks Apply with the reason, and Undo.
Installation
Overview
Let people rename a pile of files by a rule and see every result first, with this bulk renamer for Vue with Ark UI. It is the renaming tool of Renamekit, for a photo studio. The pattern sits at the start: a prefix and a suffix, a find and replace pair, a letter case in a Native Select, and a Switch that numbers the files instead, with a start number and a number of digits. The list at the end shows Before and After for every file and follows each keystroke. Two files that would end up with one name are flagged "Clash", an empty or illegal name is flagged "Not allowed", and Apply, a Shine Button, stays disabled with the reason in the status line until they are fixed. Apply renames the list in place and Undo brings the old names back. Add files joins files by name through File Upload. The frame's bands are ruled by Guides. For bulk renaming, photo and media tools, import clean-up and any app that names files in batches.
FAQ
In what order is a new name built?
The extension is kept as it is. The name before it is either the original name with every occurrence of Find replaced by Replace with, or, when numbering is on, a number; the prefix and suffix go around that, and the letter case is applied to the whole result. Numbering replaces the name, so Find and Replace are disabled while it is on.
How are clashes found?
After the new names are worked out, every name is compared with the others without regard to case, as macOS and Windows do. Any name that two or more files would share gets "Clash" on each of them, and a name that is empty or has a character that file systems refuse is "Not allowed". Try Find "-copy" with an empty Replace: "IMG_4023-copy.jpg" becomes "IMG_4023.jpg", which the file next to it already has.
What do Apply and Undo do?
Apply renames the entries in the list, clears the pattern and moves focus to Undo, saying how many files changed. Undo puts the previous names back, once. Neither touches a file on disk.
Does it read the files I add?
No. Added files join the list by name only, up to fourteen, and are renamed in the list like the sample ones. No file is opened, renamed, uploaded or saved.
What stays local, and how do I wire it to real files?
The list, the pattern and the undo copy live in the block's state. To rename for real, send the items that are renamed as old-name and new-name pairs to your storage API from apply, and keep the clash check, since your storage will refuse a duplicate too.