Display Filename for Download

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.