Webflow CMS & Collection Lists

Display Filename for Download

Overview
CMS Basics
Strongly-typed Data-binding
11:45
101
CMS Field Types
11:45
102
Sorting Collection Lists
Sorting by OPTION & REF Fields
13:43
201
Random, Dynamic List Sorting
202
Filtering Collection Lists
Filtering Collection Lists
11:45
250
Working with Collection Lists
How Collection List Pagination Works
3:46
301
Unbinding Collection Lists
3:46
302
Hide an Entire Section w/ Empty Collection Lists
7:00
303
Nesting Collection Lists
304
Display Filename for Download
Int
305
Collection Lists & Custom Code
How to Store Custom Code in a CMS Text Field
Int
400
How to Bind CMS fields to Custom Attributes
Int
401
Collection Pages
Collection Pages
501
No items found.

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.
Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.