File Download Component

Showcases the File Dowload component. [6:04]

Two options for completing this exercise...
  1. Request a Self-Paced account on the Training Server. Then just follow the instructions as is.
  2. If you already have access to the main Author Server, adapt the instructions to fit your own site.


These components provide a way for your readers to access a file that cannot readily be viewed in a browser, because it is in a format that requires additional software.

Unlike a regular hyperlink that goes to another webpage, the File Download component has what is called a 'reference' to a file, that is either uploaded and then embedded into your page, or is located in the Digital Assets area of the UBCMS.

We will explore both methods for adding the referenced file in this exercise.


1. Log into the UBCMS.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

  • Click the Toggle Side Panel button in the upper left of the window.
  • Switch to the Component Browser.
  • Components are listed alphabetically. Or type part of its title and click Enter.
  • Find the File Download Component and drag two of them onto your page.

Upload (embed) a file into your page...

In this case, you will upload a unique copy of the file to the UBCMS and embed it into this page.  

  1. Select the first File Download component, then click the wrench icon to Configure it.
  2. Add some meaningful text for your visitors to click on. (If you leave it blank, the UBCMS will just insert your file name, which may confuse your visitors.)
  3. Now click the File area.
  4. A dialog box will open, and you will need to navigate to wherever your file is located on your local computer. 
  5. Select a file, click ‘Open’, and then the checkmark. The file has now been uploaded into the UBCMS and is embedded as part of this page.

Reference a file that is in your site’s digital Assets area...

In this case, the master copy of the file stays where it is, and the page merely has a reference to that file. So if the master copy is deactivated or deleted, your reference will be a dead end!

  1. Select the second component, then click the wrench icon to Configure it.
  2. Add some useful text for your visitors to click on, or leave it blank and the UBCMS will just insert your file name.
  3. Now instead of clicking the File area, go back to the Side Panel and switch to the Asset Browser.

    This tool can be a little tricky. If you know the filename you can search in the Filter box, but otherwise navigate to your site’s folder to find it.
  1. Where it says ‘Enter path’, click magnifying glass and a dialog box will open.
  2. For this exercise, navigate to Assets and then the Training folder.
  3. If you've found the right folder, you must select the folder by clicking the thumbnail to the left of its name. 
  4. Then click Select to return to the Asset Browser.

    Now the browser shows the content in your folder, but be warned, you may not be seeing everything. There’s a dropdown for file type that is usually set to Images when you begin. If you want to use the PDF in the tutorial, switch to Documents, then choose the org chart, and simply drag it onto the component.

  5. Then click the check mark.
  6. Compare the results.

The UBCMS will automatically display the file size and an icon that matches the file type. (You may need to refresh the browser to see this.)

Screen readers will state the user is about to download a file of a specified size.

You can also use this component to link to a file that is located on a site off the UBCMS.

Additional Reading