Version : 7.0 
Date modified : 2024-03-05

8.2 The DropFiles Component

This page includes one or more support videos to assist you in this topic!

In this section and from hereon, we use the term "Category" and "Folder" interchangeably!

When you navigate to Components > Dropfiles and you will see 3 columns of data – below is an example showing the categories in the left column which look like grey folders, files in the centre column and a properties or settings column on the right. 

image173

If you see one, ignore the Google Drive Icon!

Below the New button, you may see a triangle icon which represents connection to a Google Drive. This is a legacy button and is no longer used so you should not click it! If you do click this button then the new folder will be created but the results may be unpredictable!

image174

8.2.1 Help! I only see TWO columns!

If you cannot see the third "Settings" column, look for this <--- arrow icon on the top of the page on the right (see image below). This is the 'Expand" icon and allows you to view or hide the third column when using smaller screens. When you click it, it will force the third column to appear.

Likewise, you can click it when it looks like this --->, in order to hide the third column.

image175

8.2.2 What are Settings?

Settings are details related to the selected item. For example, when you select a category / folder in the first column, then the files in with the selected category are displayed in the second column. At the same time, the settings for the selected category / folder are shown in the third column.

Similarly, when you select a file in the second column, then the settings for the selected file are displayed in the third column.

8.2.3 Dropfiles Categories/Folders

Dropfiles, like so many other areas of the website, uses categories to group files together and to make management of these files are easier.

As we related earlier in the Categories section of this guide, categories are like folders. In Dropfiles you add related files to folders just like you would in the hardcopy world with manilla folders etc., so they are organised in a way that is simple to manage.

8.2.4 Adding and Moving Category Folders

In order to create a new category folder, click on New Category at the top of the left column:

image177

Note: As mentioned above, if you see a triangle icon under "New", ignore and do not use it. This is a legacy feature for linking to Google Drive that we no longer support.

A new category will be created at the bottom of the list.

image178

8.2.5 Renaming the new Folder

This is important!

If you do not rename your new folder, over time you will end up with a list of folders all with the same title of "New Category" and you will not know which one is which!

To rename your new category, move your mouse over the newly created folder and click the Edit icon (a pen) which appears to edit the name.

image179

image179

8.2.6 Deleting a Folder

You can use the Trash icon to delete the category and all of its contents.

Move your mouse over the folder that you want to delete and click the Trash Can icon. You will receive a warning asking you to confirm that you want to delete the folder.

Warning! When you trash a folder, it and its contents cannot be retrieved!

8.2.7 Ordering the Categories

To order/sort the categories to make them easier to find (maybe to want to have folders sorted alphabetically or need a specific order for your own purposes) you can use hover your mouse over the folder you wish to move (the cursor will become a cross-hairs) then click and drag and drop the folder icon to move it vertically up and down to where you want it to sit in the list of folders. Move it from up or down to put it in the right place. Watch the animaton below for help!

movingfolders gig

8.2.8 Sub-folders (or folders within folders)

If you want the selected folder to sit within another existing folder, drag it first under the 'parent' folder it will belong to and then drag it from left to right slightly to make it a child folder of the parent.

image182

Note, when a folder lives within another folder, a chevron (>) icon appears next to the parent folder. You can open or close the parent folders to see the child folders it contains by clicking on the > and v buttons on the side of the parent folder.

Moving Category Folder5

8.2.9 Setting the folder up correctly

When you create a new category/folder, you must select it in the left column, (even if it holds no files yet), and then look on the right side of the screen in the settings column where you will see the properties for the selected folder and the first area you will see is the Theme chooser and appearance attributes for the selected category. Unless otherwise instructed always choose the Simplex theme.

If the Simplex theme is not available, choose the Table theme instead nd give us a call to install the Simlex theme for you.

image183

The Simplex theme is a newer theme built for selected websites that display your files as follows:

image183

The Table theme with its three columns is the default ‘older; layout for your documents - it will look a little like this when shown on the webpage:

image183

With the theme selected you will see options under this area. You do not need to adjust any of these settings because we have set them for you already. These changes we have applied reduce the clutter that might otherwise be shown, for example display/hide file size, file hits number and so on.

Once you’re done with changing the category Theme parameter, you should click on the Save Settings button at the top or bottom of the right column to save the theme preference for your selected category.

8.2.10      Pagination of Files

In the front end of your site, when you view files, there may be occasions when you have lots of files in a folder making the web page very long (to show them all at once).

If you need to show files in groups at a time, we can enable ‘Pagination’ for you which will set the number of files shown ‘per page’ to 10, 20,50 or 100. Call us if you would like this feature enabled for your site.

Need help?