3rd Party Hosting Webflow Sites & Files

Hosting Files on Google Drive

No items found.
Overview
What Does Webflow's Hosting Provide?
001
Hosting Sites
Hosting Sites
200
Exporting a Site
201
Reverse Proxy
202
Hosting Files
Hosting Files
600
Hosting Files on Google Drive
601
Hosting Files in Dropbox
602
Hosting Code
Hosting Client-side JavaScript Code
700
Hosting Editable Content & Data
Hosting Editable Content & Data
800
Hosting Data Using Google Sheets
801
Google Docs
Hosting Data Using Google Docs
850
In-Directly Embedding Content from Google Docs
851
Directly Embedding Formatted Content from Google Docs
852
Hosting on CDNs
Hosting Code on CDN
900
Dev & Build Process
901
No items found.

Webflow has built in support for storing files such as PDFs in your site's assets, and then linking to them.

Unfortunately;

  • You cannot force a download, or specify a download filename. In fact the download attribute isn't applied to the link at all so the browser will try to display ( not download ) the file if it can.
  • You cannot add the download attribute through custom attributes, since it's reserved.
  • File types are limited.
  • File sizes are limited.

These limitations narrow down the use cases where Webflow's assets and Webflow's file links can be used for file delivery.

Google Drive

Google Drive can be a great choice for this.

  • Force download of your file, when you want to, rather than viewing it
  • Deal with larger files
  • 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.

Google drive file link

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

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.