File Manager

There are two ways for managing your files:

  • File Manager - File Manager is a storage space for static content used on the websites, such as pictures, cascade styles, JavaScript files, etc. The files can be organized into folder trees. The module is divided into two parts – the left (Folder Manager) shows a tree of created folders and the right (File Manager) displays the content of the currently selected folder.

  • File Source - You can use an external service for managing your files (such as product images or documents). This can typically be an Amazon S3 storage.

File Manager Limits

File Size Limit

The size of a one file you can upload to the File Manager is limited by your account type. In case the file you want to upload exceeds the limit, you will not be able to upload it. If you want to see this limit, go to the Administration and run the Account Setting application. Here you can see the details of your File Manager. In case you want to change it, please contact our support team for more info about the account type changes and possibilities.

The maximum image size is set at 3 MB. Images that you upload to the File Manager need to be optimized.

Storage Size Limit

You are able to upload files only up to the size of your storage. In case you reach this limit, you will not be able to upload more files. In case you want to change it, please contact our support team for more info about the account type changes and possibilities.

Folder Manager

A new folder can be created either by using the top menu in the folder tree, by right-clicking on folder in the folder tree or by right-clicking in the selected folder (in the File Manager) and choosing the option New. After that you have to insert the name of the new folder and also its parent folder. All folders apart from the root can be edited and deleted.

  • Expand All will expand the whole folder tree.

  • Collapse All will collapse the whole folder tree.

  • Add Folder allows you to create a new folder. You have to insert Name and Parent Folder. You can also add a Description. Name and Description are used only for internal purposes and are never visible to the visitor.

  • Edit Folder allows you to edit an existing folder. Select the folder you want to edit and click this button. You will be able to edit Name and Description. In case you want to change the folder hierarchy, you can drag and drop the selected folder and place it on the target folder.

  • Delete Folder allows you to delete an existing folder. Select the folder you want to delete and click this button. You will be asked for confirmation and after that will be the whole folder (with all files in it) deleted.

There are two main ways to display the content of a folder selected on the right side. Click the View button in the toolbar and select one of the offered options that is more suitable for you:

  • Detail displays a transparent overview with big icons. You are not able to filter or sort these records.

  • List displays a grid which allows you to filter and sort particular records. This view, some users find a little bit unclear.

File Manager

After clicking on the folder its content (a list of all files) is displayed in the right part of the application. Detailed information about the file is available after right click on it and selection of the Properties item.

A file can be added in the following ways:

  • Click Upload File in the toolbar, select a file from your computer and insert a Name (required) and Description (optional)

  • Drag the file from the desktop of your computer to the folder

  • Right-click on the content of the folder and choose the desired content through the option New

A file can be deleted in the following ways:

  • Select the file you want to delete and click the Delete button in the toolbar

  • Right-click on the file you want to delete and select the Delete option

Rename, Relocate and Download Files and Folders

In File Manager, you are able to rename and move files in the folder structure.

Rename

  1. Run the File Manager and locate the files you want to rename.

  2. Click directly on the name of the file and change its name.

  3. Click anywhere else and the name change will be saved.

The renaming of folders is a little bit different. You have to click the right button on the folder you want to rename and select edit (in the left part of File Manager) or select “Properties” (in the right side of the File Manager) and change the name in the new window that appears. Save this change.

Move Files and Folders

  1. Run the File Manager and locate the files you want to move. Mark it (or them, you can work with more than one file) with the mouse button.

  2. Drag and drop selected file(s) to the new location using both left and right part of the File Manager.

  3. These changes are saved automatically after you make the move.

Download Files and Folders

Thanks to this feature you can download whole folders or selected content at once.

  1. Select a folder in the Folder Manager or particular files and/or folders in the File Manager.

  2. Click the Download button located in the toolbar. You can specify whether you want to download the entire folder or just the selected content.

  3. If you download only one file, it will be downloaded directly. For folders and multiple files, a job will be scheduled and after a while, you will be able to save the content in the ZIP file type.

File Upload

There exists a few ways to upload a new file.

Simple upload

All files you want to work with in BizBox Admin have to be uploaded to the File Manager first.

  1. Run the File Manager by double-clicking.

  2. Locate a folder into which you want to upload the file. You can also create a new folder if you want.

  3. Click the Upload button and select the particular file from your computer.

  4. Upload the file.

Upload more files at once

You are also able to upload more files at once using the drag and drop function. Folders included in the drag and drop selection will be ignored and only the files will be uploaded. In case you want to take it into account and also create folders, you have to use the ZIP file upload method.

  1. Run the File Manager by double-clicking.

  2. Locate a folder into which you want to upload the files. You can also create a new folder if you want.

  3. Drag and drop the desired files to this folder from your computer.

  4. A progress bar for these files will be displayed on the right side of the File Manager.

  5. When the files are uploaded, you will be able to work with them.

Archive extraction

You can upload a ZIP file and extract it directly in the File Manager. This feature allows you to upload files and folders too. The whole structure of the ZIP file (including folders) will be preserved (folders from the ZIP will be also created).

  1. Upload the ZIP file (by the simple upload or use the drag and drop method).

  2. Right click on the ZIP file and select the “Extract Here” option.

  3. All files and folders will be extracted and you are able to work with them. You can also delete the source ZIP file if you want to.

Delete Files

If you want to delete files or folders, simply mark them with the mouse button (you can mark more items at once) and click the Delete button in the toolbar or use right mouse button and select Delete. A confirmation message will always be displayed.

If you delete a folder, all files and other folders which it contains will be deleted as well.

Edit Files

You are able to edit the text files you have uploaded to your File Manager. These can typically be CSS and JS files.

  1. Run the File Manager and locate the text file you want to change.

  2. Right click the file and select the Edit Source option or use the double click on the file.

  3. A new window with an editor will appear and you can edit the content of the text file.

These file types can be also edited directly in the website editor on the Files tab.

Compress Files

You can compress your CSS and JS files directly in the File Manager.

  1. Run the File Manager and locate the text file you want to compress.

  2. Right click in the file and select the Compress option.

  3. The file will be compressed. Don’t forget to approve your project.

Search, filter and sort files

You can search for files in your File Manager using the form in the toolbar. You can also search for certain file types using the file suffix (such as .jpg or .png). If want to clear the search results, click the little cross in the toolbar search form.

Filtering and sorting files can be performed only in the List View type. It acts just like a usual BizBox window. You can click particular columns then filter and sort according to it.

Using files and folders

Assign images (files) to products

Images, documents and other files can be assigned to a product.

  1. To add a file to a product, go to the Products module and run the Products application.

  2. Here click the “Add” button and in the File field select the image from the File Manager. For more info about particular Image Types and other product settings please visit related help-page.

  3. Click the Add button and save the product.

In case you want to add a document, use the same procedure. Instead of Images tab, use the Documents tab.

Insert file on a page

Files from your File Manager are often used on your website as a part of the code (images or files for download). To insert it, use the getFileLink function that generates link to the file. It can be consisted from 4 parameters:

  • First (required) parameter is the path to the concrete file.

  • Second (optional) parameter is a Boolean value that is set to TRUE as a default. It inserts into the generated file link a unique parameter.

  • Third (optional) parameter is a Boolean value that defines the usage of CDN (set to TRUE as default).

  • Fourth (optional) parameter is a Boolean values that defines if an absolute links will be generated (with the server name included). Default value is FALSE.

Example with definition of optional parameters:

{{ getFileLink ( ‘/images/image.png’, true, false, true  ) }}

Example with optional parameters set to default values:

{{ getFileLink ( ‘/images/image.png’) }}

Example of usage in the Product Catalog component, as the image is used the first big image of a concrete product:

{{ getFileLink( component.product.bigImages[0].path ) }}

Insert file into CSS file

Sometimes you need to insert an image directly into the CSS file. You can do it as follows:

background: url( "/__files/images/template/logo.png" );

The construction “/__files/” is necessary, because it defines the root folder of the path.

You can use this code with the getFileLink function as well:

background: url( {{ getFileLink('/image/image.png)' }} ) ;

Use folder as a source a for photoalbum

You can use folders from your File Manager as a storage and source for images you want to sell on your online store using the Photoalbum Component. This feature is not available in the standard BizBox account, you need to have the Photobank addon in your account. If you want it, please feel free to contact us for more info.

To use a folder as a source for Photobank you need to create a new folder and upload the particular images you want to sell on your online store. Remember that you can use the drag and drop feature. When you are done, run the Photobank module and create a new album. On the Source tab use the File Manager as a type and subsequently select the particular folder that contains the images you want to sell.

Thumbnails

For images inserted on pages thumbnails can be created. Thumbnail is a small preview image that is automatically created from the image itself by using the getThumbLink function.This function consists of 5 parameters:

  • First (required) is the path to the image.

  • Second (required) contains hash with the thumbnail parameters.

  • Third (optional) is a Boolean value that is set to TRUE as a default. It inserts into the generated file link a unique parameter.

  • Fourth (optional) parameter is a Boolean value that defines the usage of CDN (set to TRUE as default).

  • Fifth (optional) parameter is a Boolean value that defines if the generated URL link will be complete (with the server name included). Default value is set to FALSE.

Example with definition of all optional parameters:

{{ getThumbLink(‘/images/image.png’, { 'width': '110' }, true, false, true  ) }}

Display a folder content on a page

In case you want to display a content of one folder on a page, you don’t need to insert all files separately with the getFileLink function. You can iterate the content and define the function only once.

There are two functions you can use:

  • getFiles

  • getFolders

getFiles Example:

{% set files = getFiles( '/website/images' ) %}

In the code:

{% set files = getFiles( '/images/photos' ) %}
{% for file in files %}
        <a href="{{ getFileLink( file.path ) }}">
                <img src="{{ getThumbLink( file.path, { 'width': '226' }, true, false ) }}"
        </a>
{% endfor %}

Exactly as the files, can be used folder too. Use the function getFolders. The parameter defines the folder in which will be iterated:

{% set folders = getFolders( '/website' ) %}

Security

The security setting in the File Manager is not a part of your account automatically. It is realized as an addon and if you want to make use of it, please contact us by using our ticket system.

Thanks to User Permissions you can restrict the displaying (download) of some files and folders only to particular users. There are a few prerequisites you have to fulfil in order to make this feature work:

  • You need to define User Permission in the CMS module in the User Permissions application.

  • The permission created above has to be connected with all the users to which you want to allow the file to be. In case you will not add the created permission to anyone, the particular file cannot be displayed to anyone.

Security setting in the File Manager is always hierarchically inherited - if you mark a folder as secured (you add a User Permission to it), all items (files and folders) in this folder will be also secured with the same permission.

We assume that you have created the particular User Permissions and you also have some Website Users to which you have already granted this permission.

  • If user requests a secured file or folder and is not logged in, a login page (”Secure Not Logged Page” Special Page) will be automatically displayed instead.

  • If user is logged in and has no permission to display requested file (folder), a “Secure Access Forbidden Page” Special Page will be displayed instead. Remember that you need to define this page in the Special Pages application located in the Website Editor. This Special Page is just one of the content Pages from your Page tree. It should display information about the protected area - for example that the display of this content is limited by the permissions granted only to some website users.

  • For logged-in users with the right permission granted the file (folder) is displayed without any delay. This user is unconscious of the particular file (folder) being secured, it will be just displayed to this user as any other unprotected file or folder.

There is a little difference between the permission add for a folder and for a file.

If you want to add a permission for file, you need to locate this file in the File Manager first (the required file must be displayed on the right side of the File Manager). Right-mouse click on the particular file displays a menu. Select the “Security” menu-item. A new context window appears and you can see all existing permissions on the left side and granted permissions on the right one. To assign a permission to the file, select it from the left side and click the little arrow. You can assign as many permissions to a single file as you need. When you are done, click the Update button and the permissions will be successfully added.

If you want to add a permission for a folder, you operate only in the left side of the File Manager. Click on the required folder with the right-mouse button and select the “Edit” menu-item. A new context window appears. Notice that there is a second tab named “Security”. Click it and select all Permissions you want to apply to this folder. Remember, that in folders a hierarchical inheritance is applied – all folders and files located in this folder will inherit the Security settings from the folder.

File Manager Features

  • Create a new file directly in the File Manager by clicking the New File button in the toolbar. You can create a CSS Document, Text Document, HTML Document and JavaScript Document.

  • View button allows you to switch between the Detail and List viewing option.

  • Text files can be edited directly in the File Manager. The text editor is opened after double-clicking the file.

  • Non-text files can by downloaded directly after double-clicking the file.

  • Archive files can be extracted directly in the folder (right-click on the file and select the Extract Here option).

  • All operations with the files and folders are available in the menu after right-clicking the object.

  • Security settings.

  • A source for Photobank images (to use it for this purpose, you need to have the Photobank addon activated on your BizBox account).

File Sources

The File Sources application is located in the Administration module and is used to define the connection between BizBox and an external file source (this can typically be an Amazon S3). When you define its settings, you are able to use files from the external storage for your products or product categories. It works quite similarly to the File Manager.

To make this feature available, you need to have the File Sources addon allowed for your account.

To add a new File Source, go to the Administration module and run the File Sources application. Click the New button and insert all required info:

  • Name (required) will be used for selecting of this file source (and it is never visible to customers or website visitors).

  • Internal Name (required) is a system name used for system purposes (and it is never visible to customers or website visitors).

  • Description (optional) is used to provide a short commentary about this file source. It is internal and used only for your and your BizBox co-workers purposes.

  • File Source Type (required) is used to select one of the available file sources which can be used in your account.

  • Source (required) is provided by the selected file source (Amazon S3 most likely).

  • Source Path (required) is the path to the source in the external file source.

  • Read Only - Read only is a file system permission that only allows you to read stored files, but not write over it. If you want to upload files to this file source directly in BizBox, set this option to NO.

On the Links tab has to be provided the link to the file source (provided by the external file source, such as Amazon S3), such as //linkToTheFileSource.cloudfront.net/images/.