Use filename as text on button (or anywhere)

I have a CMS collection with 10 different file upload fields.
It’s being used as a board meeting page, where they can upload various documents for each meeting.

Is there anyway to make the button or any text, the name of the file?
Only other way I can think of, is to make a text field x10 for each file name, but that will be tedious on the client.

It would be much easier to just make the text correspond to what the filename is.

Thank you!


Here is my public share link: Read Only Project Link

Read-only project link and a published site link?

With custom code you may be able to locate and extract that filename directly.

sorry forgot to include read only

read only project link

Hi Brad,

When you upload files into the Webflow CMS, Webflow in turn re-uploads them to their public CDN changing the file path and file name.

In your example, your uploaded file:

Board Meeting April 2023.docx

Changed to:

https://uploads-ssl.webflow.com/62b466772db16d0d4273a7f7/64470b8c7c7d72a278fa59bc_Board%20Meeting%20April%202023.docx
64470b8c7c7d72a278fa59bc_Board%20Meeting%20April%202023.docx

Probably not what you were thinking for button / link text :smile:

Is there any issue in adding another field to your CMS like “File Name” that you can then use as the link / button text?

Or did you want something automated?

The former being the easiest, the latter being more complicated and potentially adding lots of unexpected issues.

Webflow prepends an internal ID, but otherwise the filename you used at upload is preserved intact. Here are 2 CMS items where the button text is automatically set to the linked CMS file field.

image

To extract that name and set the button text, you need a piece of script, and you’ll also want to identify the specific elements you’re wanting it to act on.

I’ve applied a custom attribute to those buttons of display-filename=""

Here’s the code you need, in the /body custom code section.

And here’s the read-only link of a demo project;

https://preview.webflow.com/preview/cms-file-upload-c62216?utm_medium=preview_link&utm_source=designer&utm_content=cms-file-upload-c62216&preview=230e54499cfbbfa39ef05c889fc812c1&workflow=preview