Skip to main content

File Browser

The File Browser component allows you to directly access the files stored in your Rapid site's Sharepoint folders. With the File Browser you can upload, download, delete, rename, open, or email the files stored in Sharepoint.

A screenshot of the "File Browser" component as it appears in Explorer. The screenshot is annotated with two red boxes to assist the viewer in locating the location of the file browser component. In the upper portion of the screen, the user has selected the "Files" tab of an item. In this example, the item is a Project titled "Office Building Construction". Underneath is the Command Bar, and below it is the File Browser component. The Browser component is similar to how files appear in Windows File Explorer: each file is placed in a row. In the "Name" column, the projects are labelled as: "Project Scope - 26-03-2024.docx" "Project Scope - 26-03-2024.pdf" and "Project Scope.docx". The next column has a "download" button for each file. The icon of the download button is a cloud, with an arrow pointing downwards. The next column states when files were modified. The column afterwards states who modified the file. The final column lists the size of the files.

The File Browser component will be labelled <Item Name> Files to indicate which item's files are being accessed.

Viewing Files​

Files as Items​

Using the File Browser component, we are able to view a variety of file attributes and information. If we examine the example file item below, the following information is visible:

A screenshot of the example file item &quot;Example Attachment.docx&quot; again.

ColumnExampleExplanation
IconA screenshot of the Microsoft Word icon, zoomed in from the image above. It resembles a written page, with a blue W logo atop it.Here the file's icon is displayed. In this example, a word document icon appears.
NameExample Attachment.docxHere the name of the file, and the file's extension are written out.
DownloadA screenshot of the download icon, zoomed in from the image above. It resembles a cloud with an arrow descending from it.Clicking this button will download the file to your computer.
Last Modified2 minutes agoThis is the (relative) time that the file was uploaded or last updated.
Modified byBlurred out in this example for privacy reasons.Here, the full name of the User or System that uploaded the file or edited it, will be displayed.
Size0.0MBThis is the size of the file in megabytes. The document in this example is very small (less than 1MB), so it appears as 0MB here.

Selecting a Single File or Folder​

To select a single file or folder, click anywhere on its row (except the download button).

Alt text

Selecting Files

Clicking on another item will cause the selection to switch to that file or folder instead.

Selecting Multiple Files or Folders​

The File Browser component allows you to select multiple files or folders at once. This allows you to use a button from the Command Bar, and apply its commands to multiple items. Essentially, files in the Files Browser behave similarly to items in Explorer's Tables.

File Preview​

When an item is selected using its selection circle, a preview of the file's contents will be generated in the File Preview if the file is a common filetype (e.g. .DOCX, .CSV, .PDF, .JPG, .PNG, etc.)

For this to happen, the File Preview must be enabled by your system administrator. The File Preview can also be revealed or hidden by using the Details button in the File Browser's Command Bar.

  1. Ensure an item is selected in the File Browser.

Alt text

  1. Press the ⓘ Details button in the Command Bar.

A screenshot that shows the location of the details button. The screenshot is annotated with a red box to highlight the location of the button. The &quot;Details&quot; button has an icon of the letter &quot;i&quot; enclosed within a circle: symbolising that this button provides further information.

  1. If the File Preview is enabled, it will appear as a side panel on the right-hand side of the site.

A screenshot of the File Preview and how it appears on the Rapid site. The screenshot is annotated with a red box that surrounds the File Preview. There is also a red arrow indicating that the item which has been selected is now displaying in the preview file.

  1. If multiple items are selected, navigation arrows will appear at the top of the File Preview so that you can navigate between the files being previewed. In the centre of the arrows is displayed the name of the current document being previewed.

A screenshot showing how the navigation arrows appear in the header. This is a &quot;zoomed-in&quot; view of the header from the previous image. The screenshot is annotated with red boxes to highlight the location of the arrows that point left and right at either side of the blue heading. The name of the current file is displayed in the centre of the header.

File Preview Full-screen​

On the right of the ⓘ Details button is the Full Screen* preview button. This button only functions when the File Preview sidebar is open.

A screenshot demonstrating the appearance of the &quot;Full-screen Preview&quot; button. The screenshot is annotated with a red box to demonstrate the location of the button on the Command Bar. The icon of the button resembles a diagonal line, with two arrows on either end. One arrow points to the upper right, and the other arrow points to the lower left. This symbolises a the File Preview growing larger.

Pressing this button will open the document in full screen for an easier reading experience. The Rapid site behind the document will become blurred.

A screenshot of how the Full-screen Preview appears on the Rapid side. The regular Rapid site becomes blurred in the background. The File Preview component now fills most of the browser window. The heading &quot;OneDrive&quot; appears at the top on a blue banner. In this example, a Word document titled &quot;Example Policy (v1.1)&quot; is being displayed in the viewing area. At the bottom of the component are buttons to change the page number, or zoom in and out.

To return to the Rapid site, either click the blurred background of the site, or press the Esc key on your keyboard.

Upload Files via Drag-and-Drop​

If the folder being viewed in the File Browser component is empty, the main display section of the component will display the following message:

A screenshot of the message. There is an icon of an empty folder at the top of the message. On the first line it reads: &quot;This folder is empty.&quot; On the second line it reads: &quot;Drag and drop some files from your device over this area to upload them to this Project.&quot;

As soon as a file is uploaded to the File Browser component, this message will appear. Note, however, that the functionality of dragging-and-dropping files will persist despite the message vanishing.

  1. Find the relevant file in your operating system's file browser.

  2. Click the file, hold the mouse, and drag it onto the display area of the component

  3. Release the mouse when the cursor displays the message + Copy.

  4. The file will now upload.

A screenshot that demonstrates how a file can be dragged from the operating system of a computer onto the display area of the Files Browser Component in Rapid. The screenshot is annotated with a red box to indicate the operating system&#39;s file brows, and an arrow to indicate that an item can be dragged from this browser onto the component. The mouse cursor has a faint image of the word icon, and the message &#39;+ Copy&#39; beneath the cursor.

In the next article, we will learn about the File Browser's Command Bar and its various functions, including an alternative method of file uploading.