File uploader

Last updated:
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 will automatically move 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:

  • In the File name field, enter the name of the file that will be displayed in the shop.
  • 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.

  • 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 re-upload 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 uploaded Instruction1.txt file (v.1), then you updated and re-uploaded it to the Administration Interface as v.2. After that you decided that the image instruction would be more useful in this case and uploaded Instruction.png (v.3) to the file.

Thus, you will have 3 versions of a file available: 2 text instructions and one image instruction. File versions

By default, the latest version of all available will be 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 will 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 will download the latest version of the file.

MIME Type Settings

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 will help the browser to determine how it will process a document. For example, if the MIME type is set as “text/html”, then a client will open the document in Notepad, if the MIME type is set as “image/jpeg”, then the client will open it via image viewer program.

MIME type settings

Only files with the MIME types ticked in the Is Allowed column will be 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 should 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.