Sunday, 27 December 2020 13:37

File Manager

Upload, manage and insert files
About the File Manager
File Manager Interface
Inserting a File
 

With the File Manager you can

  • Upload files
  • Create folders
  • Rename, cut, copy, paste and delete folders and files
  • Create links to files such as images, documents (Word, pdf etc.) with the option to include a file type icon, file modfied date and file size in the link text.
  • Embed some files types in content using an iframe
  • Create links to files to be opened in Google™ Docs Viewer or Office Apps Viewer
  • Create lightbox style popups for files using JCE MediaBox.

Use of the Google™ Docs Viewer is subject to the Google Terms of Service

Filemanager

The File Manager interface, like all Manager dialogs, consists of two parts, the File Browser section, where files are uploaded, manipulated and selected, and a Properties section where various file options can be set.

The Properties section is contains three tabbed areas - FileAdvanced and Popups

Filemanager properties

File Tab

URL

The URL field represents the file link's href attribute, and is the relative path to the file on the server, or the full URL to an external file.

Title

The link title attribute. Used as a description of the link and will be shown as a tooltip when the mouse is placed over the link.

Format

The format of the file insert - Link inserts the file as a link and Embed embeds the file into content using an iframe.

Open With

An optional method for displaying the link using either Google™ Docs Viewer or Office Apps Viewer

The options area in the grey box will change depending on the Format selected - 

Link Format Options

Link format options

Text

If a text selection was made before opening the plugin this field will be filled by the selection. If the selction was any other element (an image for example), the Options section (including the Text, Layout and Class fields) will not be available. If no selection was made prior to opening the plugin, a text description of the link is required for this field.

Target

Where the link should be opened when clicked. When this option is set to Download, the file will downloaded when clicked (modern browsers only)

Layout

This field contains optional elements that will be included in the link's description and include the file icon, text (required), file size and file modification date. The Size and Date fields are filled when a file is selcted in the File Browser. These values can be edited and the original values restored by clicking the corresponding reload icons 

Each of these elements can be re-ordered, thereby affecting the order that they are displayed in the link, by dragging their boxes from left to right / right to left.

Include each element in the link by checking the corresponding checkbox.

Date Class and Size Class

Apply additional classes to the Date and Size span element descriptions in the file link.

The HTML created when inserting a link typically consists of the link/anchor element, the file Icon img element, the file Text, and two span elements each containg the Date and Size values eg:

<a href="/images/files/2017_Joomla_Brand_Manual.pdf">
<img src="/media/jce/icons/pdf.png" alt="pdf" class="wf_file_icon" />
<span class="wf_file_text">2017_Joomla_Brand_Manual.pdf</span>
<span class="wf_file_size" style="margin-left: 5px;">3 MB</span>
<span class="wf_file_date" style="margin-left: 5px;">12/08/2017, 11:38</span>
</a>

Embed Format Options

Embed options

The embed options are similar to those available when inserting an image with the Image Manager, or inserting an iframe with IFrames.

Dimensions

The width and height of the iframe, in pixels. If the proportional checkbox is checked, changes to one value will automatically be affected on the other. When inserting a file using the Embed option, Dimensions values must be set.

Alignment

The position of the iframe relative to surrounding text.

Margin

Represents the amount of space (in pixels) between the iframe and surrounding items. If the Equalize box is checked, all margin positions will use the same value.


Advanced Tab

The Advanced tab contains fields for setting standard attributes for the file link or iframe.

Advanced optionsID

Unique identifier that distinguishes the element from others in the document.

Style

Represents the style attribute. Will be populated with styles set in the File tab (margin, align etc). Additional styles can be added using the style element syntax, eg: text-align:right;vertical-align:middle;

Classes

A list of classes from your Joomla! template that can be applied to the link. Classes can be selected by clicking the drop-down icon, or typed into the field seperated by a space.

Language Direction

Text direction of the element

Target Language Code

Language code of the target url

Language Code

Language code of the element, eg: en-GB

Target Character Encoding

Character encoding of the target url, eg: utf-8

Target MimeType

MIME (Multipurpose Internet Mail Extensions) Type of the target url eg: text/html

Relationship Page to Target

Relationship between the current page and the target url

Relationship Target to Page

Relationship target url and the current page

Tab Index

Tab order of the element

Access Key

Keyboard shortcut to access the element

A file can be inserted into an article as a link that the visitor can click on to view and access, or for certain file types, embedded with an iframe which can be viewed directly in an article.

Insert a File as a link

A file link can be inserted onto an existing selection - such as text or an image - or inserted at any point in the editor.

If the selection is an element, such as an image, additional File Manager options will not be available for the link. If the selection is text, the Text field will be filled with the selection.

  1. Select the file in the File Browser window of the File Manager dialog by clicking on its name.
  2. The URLTextDate and Size fields will be filled with the relevant properties of the file. If the link is being applied to a text selection, the option of overwriting this text with the file name will be given.
  3. Set the Format option to Link.
    Select the Format option
  4. If you would like the file to be opened with an external service when clicked, such as Google Docs Viewer or Microsoft Office Apps Viewer, set the required option from the Open With list. Some file document file types - doc, docx, xls, xlsx, ppt, pptx - cannot be opened by the browser and may require an external service to view them. If an external service is not selected, the browser will prompt to download the file.

    Use of the Google™ Docs Viewer is subject to the Google Terms of Service

  5. Select options for the link by checking the IconSize and Date boxes and re-order their positions in the link by dragging their boxes from left-to-right / right-to-left.
    Select and order link options
  6. Select the Target (where the link will open when clicked) if required. If the file is intended as a download, select the Download option.
    Select the link target
  7. Click the Insert button to create and insert the link.

Insert a file as a Popup Link

If JCE MediaBox, or another supported popup extension is installed, a "lightbox" popup link can be created for the selected file.

  1. Follow the instructions above for inserting a file as a link.
  2. Click the Popups tab and select a Popup Type, eg: JCE MediaBox Popups.
    Select a popup type
  3. Set any other popup options as required such as the Dimensions (width x height).
  4. Click Insert.

Embed a File

If content, such as text or an image, is selected in the editor, it will be replaced with the embedded file.

  1. Select the file in the File Browser window of the File Manager dialog by clicking on its name.
  2. Set the Format option to Iframe.
    Set the Format option to iframe
  3. Some file document file types - doc, docx, xls, xlsx, ppt, pptx - cannot be opened by the browser and may require an external service to view them. If you would like the file to be opened with an external service, such as Google Docs Viewer or Microsoft Office Apps Viewer, set the required option from the Open With list. If an external service is not selected, the browser may prompt to download the file, depending on the file type.

    Use of the Google™ Docs Viewer is subject to the Google Terms of Service

  4. When the Iframe option is selected, options for the iframe display will be shown, including the Dimensions (width and height), Alignment and Margin. When embedding a file, the Dimensions should always be set in pixels. If no dimensions are set, the default values of 640px x 480px will be usedSet the embed options for the file
  5. Click the Insert button to embed the file.
Read 6409 times