File field

The file field is a Collection field that lets you add several popular file types to CMS items that site visitors can view or download with a click or a tap.

You'll need CMS or Business hosting to use the file field.

Common uses

• Let your clients upload PDFs (menus, schedules, location maps, and more). Clients love PDFs.
• Reveal a downloadable brochure, whitepaper, case study, ebook, and more in the success state of your forms on a templated landing page. Boom, gated content!
• Add a downloadable CV/resume link for each team member on your team page
• Provide downloadable graphics like wallpapers, infographics, and more in your blog posts

In this lesson

• Adding a file field to a Collection scheme
• Uploading files to a file field of a Collection item
• Connecting file fields to file links
• Filtering a Collection list using the file field
• Setting conditional visibility using the file field

Adding a file field to a Collection

You can add a file field to a new or an existing Collection. In your Collection settings → Collection fields, add a new field and choose the File field.

Uploading files to a file field of a Collection item

To add files to your collection items, drag and drop a supported file or click the file field to upload one. Wait until the file is uploaded before saving the collection item.

Supported file types

The file field supports the following image file types: 

• PNG 
• JPEG / JPG 
• GIF 
• BMP 
• SVG
• WebP

You can also upload six types of documents: 

• PDF
• DOC / DOCX 
• XLS / XLSX
• PPT / PPTX 
• TXT 
• CSV
• ODT
• ODS
• ODP

The maximum file size is 4MB for images and 10MB for documents.

Please only upload files you have the right to use and distribute.

Once your file is uploaded, you can see a preview of the file by clicking the link icon on the top-right. At any time, you can replace the file or even delete it from the file field.

Using the file field in your Collection lists and Collection pages

To use a file field in your Collection lists and pages, connect it to any link element: a text link, a link block, or a button.

You can also use the file field to filter a collection list or set conditional visibility on elements in Collection Lists or a Collection Pages. Learn more below.

Connecting file fields to file links

To create a dynamic file link:

1. Add a link element to your Collection list or Collection template page
2. Choose file in the link settings that appear next to the button. You can also access the link settings in two other ways:

• Selecting the link element and clicking the settings icon next to the element label on the canvas
• Selecting the link element and going to the settings panel (D)

3. Select get file from
4. Select the file field from the dropdown

Need to know

When you click a link connected to a file field, image and document files will open in the same tab. Other file types will be downloaded to your computer. If you want images and documents to open in a new tab, make sure to check the open in a new tab checkbox.

Must know

When a link is connected to the dynamic file field, any file that you've previously attached to the file field from the asset panel will be overwritten by the file specified for the collection items. Removing the connection will restore the previous file attachment to the link.

Pro tip — image file attachments

At the moment, you can get file attachment links only from file fields and not image fields. So, If you wish to attach images to link elements, use a file field to upload your images.

If you wish to link an image thumbnail to the same image, do the following:

1. Create an image field and a file field in your collection
2. Upload the same image in both fields. You may upload a smaller version in the image field if you only need it as a thumbnail.
3. Add a link block to your Collection list or Collection page
4. Either drop an image element inside of your link block and get the image from the image field, or set the dimensions of your link block and add a background image. Set it to cover and get the image from the image field. Learn more about using image fields.
5. Select the link block and get the file link from the file field. Choose open in new tab if you do not want the image to open in the same tab.

Filtering a Collection list using the file field

You can filter a Collection list using the file field.

1. Select the Collection list you want to filter
2. Go to the settings panel (D) → Collection list settings → filters
3. Add a filter:  file field ー is set or is not set
4. Save the filter

The filter rules that you can use with the file field are:

• Is Set - looks for Collection items that have a file set for this file field
• Is Not Set - looks for Collection items that don’t have a file set for this file field

Learn more about filters.

Setting conditional visibility using the file field

You can set a conditional visibility rule on a link element that is connected to a file in your Collection list or page. This ensures that this element is only visible when a file is set in that specific file field.

1. Select the link element that is connected to the file field
2. Go to settings panel (D) → conditional visibility
3. Add a condition (when this element is visible): file field — Is set
4. Save the condition

Learn more about conditional visibility.

Example: Download button

To create a dynamic download button on a Collection page:

1. Add a button to your Collection template page. Style it as you please. Change the text to something like: "Download."
2. Under settings panel → link settings, choose the file link type and get file from your field field.
3. Under settings panel → conditional visibility, add (+) a condition: file field — is set.

Example: List of downloadable files

Here are some examples of lists you can create to display file field content on your site.

If you have one file field in your collection:

1. Add a Collection list to your page. Connect it to your Collection.
2. Add a text link inside of the Collection item
3. Under settings panel → link settings, choose the file link type and get file from your field field. Get the text from the name of the Collection item or any other plain text field.
4. Under settings panel → Collection list settings → filters, add (+) a filter: file field — is set.
5. Style the Collection list and the text link as you please.

If you have a Collection with multiple file fields, let's say two, and you want to display them as text links next to the name of your collection item:

1. Add a Collection list onto your page. Connect it to your Collection.
2. Add a div block inside the Collection item. Set the display to flex.
3. Add a text block in the div block. Get the text from the name of the Collection item.
4. Add a text link next to the text block. Under settings panel → link settings, choose file link type and get file from your first field field. Under settings panel → conditional visibility, add (+) a condition: file field (choose the first file field) — is set.
5. Add another text link and again choose file link type and get file from your second field field. Also, add (+) a condition: file field (choose the second file field) — is set.
6. Double-click the text of each text link and replace the text with "file 1" and "file 2" or "PDF" and "DOCX", or any name you choose.
7. Style the elements as you please

You can replace the text links with images link which you can create by adding a link block and an image inside. Then, select the link block, choose file link type and get file from your field field. Also, add (+) a condition: file field — is set.