Buy Us a Beer!Community ForumMicro-Consulting

Download File ❺

Download file assets like PDFs or images, rather than displaying them

Drawing

Goals

  • Download a file rather than displaying it

  • Work with Webflow's hosting CDN, which is cross-domain and does not support CORS

  • Support a custom filename

  • Work with both asset-stored files, and CMS-stored

Use Cases

  • Fix downloaded filenames so they look nice rather than containing CDN filename identifiers

  • Download a PDF, rather than displaying it

  • Download an image

  • Upload a ZIP into the CMS file field ( by adding a second, supported extension like .odt ) and then download it as a ZIP when the link is clicked, with the correct .zip-suffixed filename.

Demonstration

Cover

Demonstration Page

https://sa5-html.webflow.io/file-download
Cover

Cloneable

https://webflow.com/made-in-webflow/website/sa5-html

Getting Started

Add the Library

First, add the library as detailed in Quick Start.

Create your Link or Button in Webflow

  • Configure the link as a File link

  • Reference your asset, or bind it to a CMS file field, depending on your desired setup

Apply Attributes to the Button element

See below for details.

Usage Notes

wfu-download-file = ( filename )

Required. Set the value to the clean filename you want the file downloaded as.

You can specify this as a literal value, or bind the attribute's value to a CMS text field that contains your desired filename.

If you filename specifies an extension, it will be used automatically. If it does not specify an extension, then most browsers will automatically add the extension depending on the file type you are downloading.

Technical Notes

Uses a blob approach to sidestep issues regarding Webflow's cross-domain assets CDN setup, lack of support for custom MIME encoding, and browser CORS restrictions relating to the download attribute.

Testing Notes

Windows
iOS
Android

Chrome

2025-Jun-01

2025-Jun-01

Edge

2025-Jun-01

Safari

n/a

n/a

Firefox

Future

? Test with multi-image fields

? Use alt text as filename

? Download button in image gallery

? Test with components

Credits

Shout out to Matt Evans and Eric R for discussions that led to the addition of this solution to SA5.

Last updated

Was this helpful?