Published
April 30, 2023
Updated
The Webflow CMS has a File type field that allows you to store files and make them available for download purposes.
In your Collection Page or Collection List you can then add a button or link, set it download and bind it to that CMS field.
However, there is no built-in means to get the original filename of that uploaded file, and display it.
For convenience, it's nice to have that option, so your link can read something like-
Without the need to manage that name in a separate plain text field.
Solution
Fortunately, when you upload a file to the CMS, Webflow prepends that name with an ID but otherwise preserves your original filename in the stored URL.
- In this example, I'm using a button, and the button is identified using a custom attribute of display-filename="".
- Custom code to locate these buttons, extract the filename, and update the button text, is in this CodePen.
- A readonly project example is here.
- In the codepen is also a commented out line to remove the extension, if desired.
