At least once a month I find myself in a situation where I have to rename a group of files, but there are too many to do by hand and too few to be worth the effort of writing a script to handle it.

Renamer makes complex file-renaming tasks simple by generating a renaming script from a series of simple but powerful transformations - with a live preview to help you visualize the changes you’ll be making.

Description

There are three sections to the app - Comparisons, Transformations, and Shell Output.

Comparison items allow you to input text to see how it will be output when the transformations are applied. You can add as many comparisons as you like to ensure that all your edge cases are covered while adding transformations.

Transformation items each have an associated “verb” - e.g. “replace”, “insert” before”, “remove” all” - and at least one input field. For instance, if you have the string “Smith_Project_042020_final.pdf” but you want to transform it into “Smith_Final.pdf”, you would add a “remove” transformation with the input “_Project_042020” and a “replace” transformation with “final” and “Final”.

Renamer Comparisons and Transformations
Renamer Comparisons and Transformations


The Shell Output section generates valid script code (in BASH and PowerShell) which you can copy/paste to execute on the command line.

Renamer Output
Renamer Output

Project Background

My work as a music producer finds me frequently involved in projects where I’m only one of many stakeholders in the production process. This can lead to a long list of different conflicts and compatibility issues - multiple different software versions, plugins, drivers, etc. are obviously no bueno.

This is why it’s popular to bypass all that nonsense entirely by “printing out” audio tracks once they’ve been appropriately processed. This way, all you’re sending back and forth is audio data instead of proprietary data about plugin settings and so forth. The result of this procedure is a long list of exported files which you can (to a certain extent) name according to simple algorithms within your DAW.

Renamer means that no matter where I am, I can be free of the limitations of the DAW export naming system, as well as feel insulated from the stomach-dropping feeling of spotting a typo only after you’ve clicked the export button, dooming yourself to minutes of waiting for dozens of incorrectly-named files to be exported.

Tech Breakdown

Renamer is a fully client-side React app. Many of its string transformations are state-dependent, so it has a top-level state that computes all the desired transformations and passes them to dumb display components. It was tempting at times to offload the complexity of state management to a library (cough cough Redux) but since the scope of the problem and the app solving it are both rather constrained in size, I opted to do Flux-like state management without a library.

It’s also the first time I’ve used create-react-app instead of trying to roll my own starter package from the beginning and holy cow am I ever a convert. Just including a sane default Webpack config probably saved me a handful of hours…the development/testing infrastructure overall is pretty sweet.

The generated shell scripts are composed by stringing together atomic transform commands. Under the hood, the Bash transformations use awk and PowerShell uses its built-in tools, so Renamer was a good opportunity for me to get to know both of these utilities better. I initially began this project using sed for BASH and regular DOS for Windows support, but switched when I needed to implement more complex multipart transformations like ‘replace all’.

Side note: I’ve never had the occasion to write PowerShell scripts before but the official Microsoft documentation was very helpful.

Takeaways

  • A single, top-level state object can get unwieldy when passing props through multiple levels.
    • Within the scope of a larger project, it would have become prohibitively cumbersome
    • However, it solves the issue of needing certain state changes to trigger other state changes. By having all the state data within a single object, you can better leverage the auto-computing of changes without needing to fire off action creators all over the place.
  • Create-react-app does a great job of abstracting away most of the framework / build chain cruft that’s necessary to build a modern JS app these days
  • PowerShell cmdlets are leagues ahead of regular DOS commands - if you’re getting started with PowerShell and find it intimidating, I found the the official Microsoft documentation to be clear and helpful.