File uploader

Edit on GitHub

The File Uploader feature is helpful when a Back Office user needs to add instructions or additional documentation to the product as an attachment. These files can further be downloaded to visitors’ PCs.

A Back Office user can manage the media files in the Back Office: File Manager menu that consists of three submenus:

  • File Tree
  • File List
  • MIME Type Settings

File tree

The files in the Back Office are kept in a tree-like structure. A Back Office user can create folders under File Directories Tree in a hierarchical system and manage the folders by dragging and dropping them in the file tree.

The files are kept in folders.

The changes take effect after Save is selected. File tree

Every folder within File Directories Tree can be deleted by selecting Delete Directory.

If the folder that is being deleted contains files in it, the files are automatically moved to the parent directory. Parent directory File Directories Tree cannot be deleted.

Upload the files to the Back Office

To upload a file to a particular directory follow the steps:

  1. Select the folder you are going to upload files to in the File Directories Tree.

  2. In the right section, click on Add File: Upload files to the Back Office

  3. On the Add a File page, do the following:

  4. In the File name field, enter the name of the file that will be displayed in the shop.

  5. In the File upload field, click Choose File and from your local storage, select the file you are going to upload to the Back Office.

If the Use file name option is selected, then the File name field is not required and is disregarded. In this case, the file is uploaded with its original name (the one you see in your local storage).

A Back Office user cannot upload an empty text file.

  1. Add translations for the File Name for every locale, if necessary.

Add translations

  1. After the file is uploaded it is available in the Files list section in the directory:

Files list

File List

File List submenu represents a table listing all the files uploaded to the Back Office: File list

A Back Office user can perform the following actions to files:

  • View—shows the versions the file has.
  • Edit—you can reupload an updated version of the file and edit its name.
  • Delete—delete the file in the directory.

Versions

File Uploader feature lets a Back Office user have several versions for every file.

For example, at first, you upload Instruction1.txt file (v.1), then you update and reupload it to the Administration Interface as v.2. After that, you decide that the image instruction is more useful in this case and upload Instruction.png (v.3) to the file.

Thus, you have three versions of a file available: two text instructions and one image instruction. File versions

By default, the latest version of all available is shown to the buyer in the shop application.

A Back Office user can Download and Delete the versions.

Add a file to the shop app

Make sure that the File Uploader feature is enabled.

To add a file to the Shop App, do the following:

  1. Navigate to the Back Office: Content Management > Pages, select the required CMS Page and click Edit Placeholders:

  2. In the Content field, add the cms_file widget:

  3. You get the string {{ cms_file('identifier')}} where you need to insert the file ID instead of identifier:

  4. Save the changes and publish the page.

  5. Check the published page in the Shop Application. The file is available as a download link to the visitor shop visitor.

The shop visitor downloads the latest version of the file.

MIME Type Settings

The MIME Type Settings submenu lets a Back Office user define the file types that can be uploaded to the Administration Interface based on their nature and format.

MIME type is a standard that describes the contents of the files. MIME type helps browsers decide how to process a document. For example, if the MIME type is set as text/html, then a client opens the document in Notepad, if the MIME type is set as image/jpeg, then the client opens it with the image viewer program.

MIME type settings

Only files with the MIME types ticked in the Is Allowed column are allowed for uploading to the Administration Interface.

Most popular file types that a shop owner can allow uploading in the Administration Interface are:

TYPE DESCRIPTION EXAMPLE OF MIME TYPE
text Represents any document that contains text and is theoretically human readable text/plain, text/html, text/css, text/javascript
For text documents without specific subtype, text/plain must be used.
image Represents any kind of images image/gif, image/png, image/jpeg, image/bmp, image/webp
audio Represents any kind of audio files audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
video Represents any kind of video files video/webm, video/ogg

To check the full list of MIME types, refer to the article.

BACK OFFICE USER GUIDES
Upload files to the Back Office
Developer guides

Are you a developer? See File Manager feature walkthrough for developers.