How do I add a file field to a Webflow Collection?

Add a file field on a CMS or Business plan

A file field stores a file on a Collection item so a visitor can open or download it from a link. Webflow says you need a CMS or Business Site plan to use it. The article's examples are a PDF menu, a brochure, a resume on a team profile, and a downloadable graphic on a blog post.

This is not the form file upload, where a visitor attaches a file to a submission. A file field is a file you put on the item. The visitor clicks a link.

Open Collection settings, then Collection fields. Add a new field and choose File. You can add it to a new Collection or to one that already has items. Name it for the file, such as Resume, so the item form is obvious.

An image field is different. Webflow says a file attachment link comes from a file field, not from an image field. Use an image field when the picture should render on the page. Use a file field when the click should open the file.

Upload a supported file on the item

Open the item. Drag a supported file onto the field, or click the field and choose the file. Wait until the upload finishes before you save the item. Saving early can leave the item without the file you think you added.

Images are limited to 4 MB. The listed types are PNG, JPEG, JPG, GIF, BMP, SVG, WebP, and AVIF. Audio is also 4 MB, and the listed types are MP3 and OGG. Documents are limited to 10 MB. The listed types are PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, JSON, LOTTIE, ZIP, RIV, MD, TXT, CSV, ODT, ODS, and ODP. Upload only files you have the right to use and distribute.

After the file is in, the link icon at the top right previews it. You can replace the file or delete it later. A link that still points at an empty field has nothing to open unless you hide that link.

Example: a Team Collection has a Resume file field. On each person who has a PDF, upload that PDF and save the item only after the upload completes. A person without a resume stays blank. You will hide their download button in a later step, rather than linking a missing file.

Connect the file to a link

The file shows up when a link element reads the field. Add a text link, a link block, or a button on the Collection list or on the Collection template page. Open Link settings from the settings icon beside the element, or from the Settings panel with D. Choose the file link type. Select Get file from, then choose the file field.

Webflow says image and document files open in the same tab. Other types download. Check Open in a new tab when a PDF or an image should open in a new tab. A ZIP is in the other group, so it downloads.

If the link already had a file from the asset panel, the dynamic connection overwrites it with the item's file. Remove the connection and the previous attachment returns. Leave the connection on when each person needs their own resume.

Double-click the button and set the words to Download resume. The label can stay the same on every item. The file changes with the item.

Example: on the Team template, add a button, label it Download resume, choose the file link type, and get the file from Resume. Check Open in a new tab so the PDF does not replace the profile.

Show the link only when a file is set

A button with no file behind it is a dead end. The file field can filter a list, and it can show or hide the link.

To keep a list to items that have a file, select the Collection list and add a filter. The rules are Is set and Is not set. Is set keeps items that have a file. A downloads page can use that so empty items never appear.

To keep every person on the team page and only hide the button, use a conditional on the button. The element has to be inside the Collection list or on the Collection page. Webflow's conditionals article says to select it, open Element settings, click the purple dot, and choose Create conditional. Choose the file field, set the rule to Is set, set the match to Visible, and set the fallback to Hidden.

The file field article's download button works the same way: it gets the file from the field and shows when the file is set. A profile with no PDF has no button. The name and photo stay.

Two file fields, such as a PDF and a DOCX, can use two links. Each link reads its own field and has its own conditional, so a missing format stays hidden.

Publish and open the file

Publish the Collection items and the template. Open a profile that has a resume. The button should show. Click it. A PDF should open, in a new tab if you checked that box. Open a profile with an empty Resume field. The button should be absent, and the rest of the profile should remain.

If the button is missing on an item that has a file, the upload may not have finished before you saved, or the conditional is inverted. Preview the file from the link icon, set Visible when the file is set, and publish that item again.

If every profile shows a button that does nothing when the file is empty, the conditional is not on the button. If the click opens an old shared PDF, confirm Get file from points at Resume.

A PDF is a document and opens in the same tab until Open in a new tab is checked. A ZIP downloads. Publish after the checkbox, then try the click again.