The Files area is a standard file manager, which enables you to interact with the various files a solution consists of – system files, images & other assets, templates, etc.

Apart from all the basic functionality which you don’t need to be told about, the Dynamicweb File manager supports more advanced features like:

  • Advanced image processing
  • Support for adding metadata to files
  • Advanced upload tools

To access the Files area click the Files button in the area menu (Figure 1.1).

Figure 1.1 The Files area

The files area consists of:

  • The Files tree (1) which is used to navigate the file structure
  • A Toolbar (2) which contains tools for working with files, e.g. the Upload Manager, the Image settings tool, etc.
  • A Content pane (3) where the contents of a folder are displayed and can be

A Dynamicweb installation is born with a number of auto-generated folders that cannot be deleted, renamed or moved:

  • The Files folder is a place to store varous non-image files, e.g. integration output files – when linked to, these files are downloaded instead of displayed
  • The Images folder contains image files – when linked to, these files are displayed in the browser instead of being downloaded
  • The System folder contains system files, e.g. indexes, repositories, item definitions, etc.
  • The Templates folder contains all templates on your solution – both those delivered by us, and the ones created by you or your partner. Designs are located in the Templates/Designs folder – each design contains a _parsed folder whose contents can be deleted to force the system to parse your templates anew
  • The Cache folder contains temp-files for cached elements – you can right click this folder and click Empty Cache to clear out the cached files

 You can right-click any folder – auto-generated or not – to access a context menu (Figure 2.1).

Figure 2.1 The Folder context menu

The options depend on the folder in question – e.g. system folders cannot be deleted, moved or renamed – but are generally:

  • Upload - upload a single file directly to the folder
  • New file – create a new file in the folder
  • New subfolder – create a new subfolder under the folder
  • Rename – rename the folder
  • Move – move the folder
  • Copy – copy the folder
  • Image Settings – open the image settings for the folder
  • Download – zip and download the folder contents
  • Delete – delete the folder
  • Permissions – set permissions on the folder

As mentioned above, the Cache folder only has one option – Empty Cache.

When a folder is clicked, the files (2) are shown in the content pane alongside the toolbar (1) and the upload area (3) (Figure 3.1).

Figure 3.1 The content pane when working with files

The toolbar is used for most of the standard file manager operations:

  • Creating, copying, moving, editing, or renaming a selected file
  • Create metafields and metatags
  • Uploading files using the Upload button or launching the Upload Manager
  • Switching between Details and Thumbnails view
  • Creating subfolders
  • Setting permissions on the folder
  • Launching the image settings tool

Right-clicking a file in the file list opens a context menu with options for file operations (Figure 3.3).

Figure 3.3 The file context menu

The following options are available:

  • Preview
  • Edit
  • Rename
  • Copy
  • Copy here
  • Move
  • Open in browser
  • Download
  • Metatags
  • Delete
  • Properties

If you click Properties on a file, you can take a closer look at various file properties such as the path, name, type, size, creation date, associated metatags, etc. (Figure 4.2)

Only the following file types can be opened and edited using the File Manager editor:

  • .html, .htm, .shtml, .stm, .js, .css, .less, .sass, .xml, .vbs, .vb, .csv, .rtf, .mht, .mhtml, .txt, .as, .xslt, .xsl, .vbhtml, .vbhtm, .cshtml, .cshtm, .config, .query, .index, .facets, .info

Both text-based files and image files can be edited directly in Dynamicweb using built-in editing tools – this is useful e.g. when making quick changed to templates or cropping user-uploaded images.

The file editor (Figure 5.1) is launched whenever a text-based file or the edit-button on a template selector elsewhere in the system is clicked.

Figure 5.1 Editing text files

The image editor (Figure 5.2) is launched from the context menu when you right-click an image file.

Figure 5.2 Editing images

The image editor can be used to do basic editing tasks:

  • Resize
  • Crop
  • Rotate/Flip
  • Edit the brigthness, contrast and saturation
  • Convert to Grayscale, Sepia, Black & White, or Negative

You can upload files to a solution in several ways:

  • You can click upload in the ribbon bar and in the folder context menu to open a simple file selector
  • You can drag-and-drop files into the upload area below the folder files list (Figure 6.1)
  • You can use FTP - this is recommended for files larger than 100 MB
Figure 6.1 Drag and drop files into this area to automatically add them to this folder

If you need more advanced features - like unzipping files on the go - you can use the more advanced upload manager (Figure 6.2).

Figure 6.2 The Upload Manager tool

To upload files with the upload manager:

  • Click Choose file and select your file(s)
  • Click Upload and the files are uploaded

The Upload Manager has several configuration options:

  • Check overwrite to overwrite identically named files
  • When uploading images, you can:
    • Set a quality percentage compared with the original file quality
    • Specify a max width and max height to auto-resize the images during upload
  • Check Extract archives to extract a zip file, and create folders to auto-create the folder structure from the zip file in the folder tree and place all files in the original folders

File names and special characters

The following characters are not handled by the upload tool: \ / : * ? " < > | , + ; # '

Apart from that, all letters, numbers and spaces are permitted, including $ % & ( ) _ . @ [ ] ^ _ ` ¨ { } ~ ´ =  - ! ¤ § £ as well as language specific characters such as æ, ø, å, ä, ö etc.

If the domain name contains non-ascii characters (like æø and ådon’t use Firefox when uploading files – temporarily switch to a less divalike browser.

The Dynamicweb file manager supports adding metadata to files.

First, create metadata fields:

  • Open a file folder and click Metafields in the toolbar
  • Add a number of fields – with an ID, a Label and an Editor type (text, checkbox, etc.)
  • Save

Once a metadata field has been created, you can select any number of files in the folder and click Metatags in the menu, then fill in values for each file.

System-wide metadata fields can be created under Settings > Control Panel > File Manager

Any solution where users – whether frontend users or editors – can upload images to the file system will occasionally encounter users who insist on uploading an uncompressed 6000x4000 image of themselves or their cat. Over time, this can result in a significant drain on server space. To combat this you can activate automatic image processing for all images added to a specific folder. This ensures that images above a certain size are compressed and resized to a more manageable size.

To activate automatic image processing:

  • Open a folder
  • Click Image settings in the toolbar
  • Activate and configure the image settings (Figure 9.1)
Figure 9.1 Image processing settings

The following processing options are available:

  • Set a max width or height
  • Select a crop offset and a compression quality
  • Check one or more of the following options:
    • Overwrite original – if unchecked, specify a postfix to add to the original filename after processing
    • Enforce output format – enforce a particular output format, e.g. .png or .jpg. Only available if the original is not overwritten.
    • Limit to these extensions – only process images with the specified extensions
    • Apply to subfolders – applies the image processing to all subfolders

You can also auto-generate thumbnail images – but we recommend using the Image Handler tool to dynamically manipulate images when they are rendered instead.

You may also use the Dynamicweb Image Handler (getimage.aspx or getimage.ashx) to display dynamically manipulated images on your website, and keep the original versions as is in the file archive.

For more advanced configuration options for the file manager go to Settings > Control Panel > File Manager.

You can read more about the options in this article.