Upload a File to Webflow That People Can Download

This video features an old UI. Updated version coming soon!

The file field is a Drove field that lets yous add several pop file types to CMS items that site visitors tin view or download with a click or a tap.

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

Common uses

• Allow your clients upload PDFs (menus, schedules, location maps, and more) via the Editor. Clients beloved PDFs.
• Reveal a downloadable brochure, whitepaper, case report, ebook, and more in the success state of your forms on a templated landing page. Nail, gated content!
• Add a downloadable CV/resume link for each team fellow 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 detail
• Connecting file fields to file links
• Filtering a Collection list using the file field
• Setting provisional visibility using the file field

Calculation a file field to a Drove

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

Uploading files to a file field of a Collection item

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

Uploading files in the Drove manager of the Designer.

Uploading files in the Drove manager of the Editor.

Supported file types

The file field supports the following image file types:

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

You tin also upload 6 types of documents:

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

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

Please just upload files yous have the correct to use and distribute.

Once your file is uploaded, yous can come across a preview of the file by clicking the link icon on the tiptop-correct. At any fourth dimension, you can replace the file or even delete it from the file field.

Preview, supersede, or delete a file from the file field in the Designer.

‍Preview, supplant, or delete a file from the file field in the Editor.

Using the file field in your Drove lists and Collection pages

To utilize a file field in your Drove lists and pages, connect it to whatsoever link element: a text link, a link block, or a push button.

Yous can as well use the file field to filter a collection list or set up conditional visibility on elements in Drove Lists or a Drove 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 Drove template page
2. Choose file in the link settings that appear next to the push button. You can also access the link settings in 2 other ways:

• Selecting the link element and clicking the settings icon adjacent to the chemical element label on the sheet
• Selecting the link element and going to the settings panel (D)

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

Need to know

When yous click a link connected to a file field, image and document files will open up in the same tab. Other file types will be downloaded to your estimator. If you lot want images and documents to open in a new tab, make sure to bank check theopen 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 exist overwritten by the file specified for the drove items. Removing the connection will restore the previous file attachment to the link.

Pro tip — epitome file attachments

At the moment, y'all can getfile attachment links only fromfile fields and non 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 epitome, exercise the post-obit:

1. Create an image field and a file field in your drove
2. Upload the same epitome in both fields. You lot may upload a smaller version in the image field if you only demand it as a thumbnail.
3. Add a link block to your Collection list or Collection page
4. Either drop an paradigm element within of your link block and go the image from the image field, or ready the dimensions of your link block and add together a background image. Set information technology to cover and go the image from the image field. Larn more about using image fields.
5. Select the link cake and become the file link from the file field. Cull open up in new tab if you practise not desire the image to open in the aforementioned tab.

Filtering a Drove list using the file field

You can filter a Collection list using the file field.

1. Select the Drove list you want to filter
2. Get to the settings console (D) → Collection listing settings → filters
3. Add together a filter:file field ー idue south set or is not set
4. Save the filter

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

• Is Set - looks for Collection items that have a file set for this file field
• Is Non Set - looks for Collection items that don't have a file set up for this file field

Larn more than nigh filters.

Setting conditional visibility using the file field

You lot tin can set a conditional visibility dominion on a link chemical element that is connected to a file in your Collection list or page. This ensures that this element is just visible when a file is gear up in that specific file field.

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

Learn more nigh conditional visibility.

Example: Download button

To create a dynamic download push button on a Drove page:

1. Add a button to your Drove template page. Way it as you delight. Change the text to something like: "Download."
2. Nether settings console → link settings, cull the file link blazon and get file from your field field.
3. Under settings panel → conditional visibility, add together (+) a condition: file field — is set.

Instance: List of downloadable files

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

If you have 1 file field in your collection:

1. Add a Collection listing to your page. Connect it to your Collection.
2. Add a text link within of the Collection item
3. Nether settings panel → link settings, choose the file link type and get file from your field field. Get the text from the proper name of the Collection item or any other manifestly text field.
4. Under settings panel → Drove list settings → filters, add (+) a filter: file field — is prepare.
5. Style the Collection list and the text link equally you delight.

If yous have a Drove with multiple file fields, let's say two, and you want to display them as text links next to the proper noun of your collection particular:

1. Add a Collection listing onto your page. Connect information technology to your Collection.
2. Add a div block inside the Collection item. Gear up the brandish to flex.
3. Add a text block in the div block. Become the text from the proper noun of the Drove item.
4. Add together a text link next to the text cake. Under settings panel → link settings, choose file link blazon and go file from your first field field. Under settings panel → conditional visibility, add together (+) a condition: file field (choose the first file field) — is fix.
5. Add another text link and again cull file link type and become file from your second field field. Likewise, add (+) a status: file field (choose the second file field) — is set.
6. Double-click the text of each text link and replace the text with "file ane" and "file ii" or "PDF" and "DOCX", or whatever name you choose.
7. Style the elements as yous delight

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

mcwhirterwassiriour.blogspot.com

Source: https://university.webflow.com/lesson/file-field

Share this post