Webflow has built in support for storing files such as PDFs in your site's assets, and then linking to them.
Unfortunately, there are some limitations;
- Webflow has a max file size of 4MB for uploaded assets
- You cannot update the file or document content. Instead you must upload a new one and update all links.
- There is no way to force the browser to download, rather than view the file
These limitations narrow down the use cases where Webflow's assets and Webflow's file links can be used for file delivery.
Why download doesn't work
In HTML, links support a download attribute however it only specifies the download filename- it does not force a download to occur. The only reliable way to force the browser to download the file is to deliver it from the server using a MIME type that the browser does not recognize or cannot display. The application/octet-stream MIME type is the most common one used for this purpose.
Unfortunately we do not have access to Webflow's servers and cannot configure the MIME type used to deliver these files.
Google Drive
For relatively low-traffic-volume sites, Google Drive is one way to overcome all of these issues;
- Force download of your file, when you want to, rather than viewing it
- Support larger files
- Allow delivery of a Google Doc or Google Sheet as a PDF, and update the content any time without changing the URL
- And support most file types
How to Host files on Google Drive
In this example, my goal is to download a PDF, rather than viewing it.
- Upload your file
- Mark the file, or its containing folder as "accessible to anyone with the link"
- Get the file's ID
- In Google Drive if you right-click the file and copy the link, you can paste it into a text editor to see that file ID
- Place it into this link format;
https://drive.google.com/uc?export=download&id=YOUR-FILE-ID
Put your file ID where YOUR-FILE-ID is indicated.
Add the link to your site, and you're done.
Demonstration
Demo project - https://hosting-files-ext.webflow.io/
Cloneable - https://webflow.com/made-in-webflow/website/hosting-files-ext
How it works
Here is a PDF uploaded to Google Drive. The original link is;
https://drive.google.com/file/d/1Ht1Mcs2r13MN5l9Fd1Bg_9Yr0wrXycIc/view?usp=drive_link
And the revised link using the File ID;
https://drive.google.com/uc?export=download&id=1Ht1Mcs2r13MN5l9Fd1Bg_9Yr0wrXycIc
Click the link here to see how it behaves.
If that same file is uploaded to Webflow's assets, and linked using the File option, this link is created. Try it as well.
Pros & Cons
- + Free
- + Easy to use
- + You can edit certain file types, such as Google Doc contents
- + There are 3rd party editors for certain file types in Google Docs as well
- - You cannot replace a file, without the fileID changing ( and thus needing to update your published link )
Technical Notes
When you take a Webflow link and assign an asset-stored file to it, the generated link looks like this ( PDF as an example );
<a href="https://assets.website-files.com/64abe52aea8a302f40bc73bf/64af54d83380ca2a900338cf_paasha_dinnermenu_2021_web%5B1%5D.pdf">Text Link</a>
Additional Resources
- How to Make a Direct Download Link for Google Drive Files - How to Geek
- Forum - https://discourse.webflow.com/t/downloadable-file-links/31126
- Forum - https://discourse.webflow.com/t/ability-to-upload-store-files-code-pdfs-images-etc/4077/58
- StackOverflow - https://stackoverflow.com/questions/3802510/force-to-open-save-as-popup-open-at-text-link-click-for-pdf-in-html
