EXT: Frontend File Browser¶

What does it do?¶

This extension provides a Web 2.0-Online File Browser, for the use in the TYPO3 frontend. With the help of this extension the user can manage files and directories of a shared area of memory on the server like the habitually explorer on the desktop computer. The following list shows a part of the offered functionalities:

• often used file and directory actions
• indexing of files and directories for optimized search
• navigation through the directory structure
• slide show, zip-functionality, trash, ...

Functions like drag & drop or different actions in the same window could be offered by using current technologies like Ajax. The objective of this extension is the transference of an intuitive and natural management of a shared area on the server for logged in frontend users (fe_users) into the frontend of an existing TYPO3 installation. The usage for this extension is especially convenient for web portals, which provide a tool for the management of own files for registered and logged in users.

Screenshots¶

Installation¶

Install the extension with the extension manager (Extension-Key: fefilebrowser). After the creation of the required tables in the database you can configure the extension.

Quickstart¶

This chapter gives a review over the required basis configuration for the work with this extension. More information can be found in chapter “Administration” of this manual

FAQ¶

- ...

Page/User TSconfig¶

You don't need a special page or user TSconfig code.

Permissions¶

The basics about the Rights & Permissions concepts of TYPO3 can be found in the "getting started" document: http://typo3.org/documentation/document- library/tutorials/doc_tut_quickstart/0.1.0/view/1/12/#id2856932 for some advanced options see the section “MOD” in “doc_core_tsconfig”: http://typo3.org/documentation/document- library/references/doc_core_tsconfig/4.0.0/view/1/3/#id2798076

Configuration¶

A detailed description of the configuration process you can find in the chapter “Configuration”.

Implementation¶

AJAX¶

The task of TYPO3 during the initialization of the extension is to render the required HTML template and send the resulting HTML code to the client. This HTML file contains only static informations, for example the html structure, the logo and the icons of the main navigation. Furthermore all the JavaScript and CSS files are transferred to the client. The window.onload-event of JavaScript triggers the client side initialization of the application. The successful transfer of all required files is the trigger for the window.onload event. The initialization consists of the creation of an instance of the AjaxFeFileBrowser class. The following code shows the initialization of the application.

window . onload = function ()
{
        myAffb = new AjaxFeFileBrowser ();
        myAffb . initialize ();
}

The initialize method triggers the creation of instances of different classes. The different regions of the user interface are represented by corresponding JavaScript classes. For the asynchronous loading of the preview content a new instance of the preview class is created.

this . initialize = function ( path )
{
        new Ajax . Request (
                index .php ',
                {
                        // Per POST übertragen
                        method : 'post ',
                        // Callback - Methode bei erfolgreicher Beendigung
                        onComplete : this . buildPreview . bind ( this ),
                        // Parameter -String , der an Server übertragen wird
                        postBody : 'eID= tx_fefilebrowser_pi1 & action = preview & path ='+path +'& lang ='+                                                   eval (" myAffb . getLang () ;")
                }
        );
}

var content = JSON . parse (r. responseText );
var titles = content . titles ;
var item = content . Item ;
...
var previewName = createTextField ( item . name );

Database¶

The database.pdf contains the database model.

Classes¶

The class diagrams of the client-side application logic (JavaScript on page 2) and the server-side logic (PHP on page 1) are situated in the file classes.pdf.

FAQ¶

- ...

Backend-Configuration¶

In the TYPO3 backend you can configure the extension Frontend File Browser by using flexforms. The tab “modules” contains the possibility to (de)activate the modules shown on the right side of the frontend. The user can only see the activated modules. If modules are deactivated TYPO3 doesn't render the according div container. The code shows the access to the flexforms.

// Flexforms laden
$this -> pi_initPIflexForm ();
...
// Wert der Checkbox auslesen
$slideshow = $this -> pi_getFFvalue ($this ->cObj -> data ['pi_flexform '], 'checkBoxSlideshow ', 'sModules ');
...
// entsprechenden div-Container einfügen
if($slideshow)
        $tmp .= '<div id="slideshowModule"></div>';

The second tab contains the possibility to define the relative path where the frontend users have access to. The search function looks for the relative path and shows only permitted units as search result.

The extension doesn't provide a configuration by using TSconfig or TypoScript templates. An upgrade in this direction is imaginable.

Files¶

FAQ¶

- ...

Creation of previews and thumbnails¶

During the creation of previews and thumbnails, which contain transparencies, in all cases problems occur that set the transparent image regions to black.

Paste of files and directories¶

When you paste a file or a directory into an other directory and in the target directory already exists a unit with the same name, the name of the new file or directory will be extended with an index (name_1.jpg). By pasting a unit into the same directory (source = target) the name will be extended with an index too. When you copy a file or a directory you will see the wilful effect, that the newly pasted unit gets a new extended name. By cutting a unit and pasting it into the same directory you will see the problem, that the name will be extended to. This effect is unmeant, because the unit should be moved and not copied.

Error management¶

For displaying the successful completion of an action the application offers different status messages. Depending on the parameter success in the server response, a status message will be shown. The following code shows the server response for the successful creation of a file.

{"items":{"action":"add","hasDirectories":0,"path":"fileadmin\/Diplom\/frage.txt","iconPath":"typo3conf
\/ext\/fefilebrowser\/pi1\/images\/icons\/txt_ico.png","thumbnailPath":"typo3conf\/ext\/fefilebrowser
\/pi1\/images\/thumbnails\/txt_thumb.png","name":"frage.txt","changeDate":"21.02.2008 10:46","size":"1
 KB","success":1,"type":"text"}}

The first version of this extension keeps ready the differentiation between the success and the error case, but this differentiation isn't used consequently for all actions on the server. That's why the server-side application logic has to be extended in this direction. When an action closed successfully the server sends success = 1 otherwise the server sends success = 0. The success and error messages could be consigned in special XML files.

Potential upcoming errors are for example:

• the input file doesn't exist on the server
• problem while uploading files
• ...

Errors while executing an action:

A successfully closed action:

¶

Double-click bug¶

The current version of the application shows undesired effects after double click on different elements of the user interface:

• home button
• refresh button
• breadcrumb
• paste button

Action cancelling¶

When the user cancels a current action by clicking “cancel” on the status message during the execution, the current version only hides the window. By clicking on the cancel button the current action should be aborted. This reaction would be wishful for different actions like the file upload and the email functionality. The duration of these actions relies heavily on the current internet connection of the user.

Parsing pdf files¶

The parsing of pdf files for getting the page number is realized with the FPDF class. While parsing encrypted and password saved pdf files problems may occur.

Performance¶

A very important aspect is the performance. Before the practical use of this extension you have to test it intensively. The performance could get down by multiple parallel requests of different users. When various users seize to the file system of the server and send Ajax requests at same time, the application may show undesired effects like over-average long latency. Further analysis in this direction is very important.

Crossbrowser compatibility¶

This extension (in the first version) is compatible to the current browsers of Mozilla Firefox (version 2) and the Microsoft Internet Explorer (version 7). A cross browser compatibility can't be guaranteed in this first version.

title-attribute for actions¶

A very useful extension of this application would be title attributes on the different action buttons. Although self-explanatory icons were selected, a title attribute offers an extra orientation to the functionality of the button.

SSL encryption¶

Information from client to server are sent by default in plain text. That's why these information might be intercepted and read. So sensitive information of a login form should be transferred in a secure way. For the encryption of the login information a browser with SSL is required. The browser encrypt the data before sending these information to the server. The encryption complicates the illegal readout. The activation of the SSL encryption is realizable with the help of a TYPO3 install tool. A detailed description can be found in the literature.

Extended upload and email functionality¶

The current version only contains a default progress bar. While processing the current request the server application shows the default progress bar. But this progress bar doesn't contain any information about the current status of the action. For length of actions for example file uploads and email sending an extended progress bar is preferable.

Cronjob for deleting of database carcasses¶

When files or directories are cut, copied or moved an entry is created in the database tx_fefilebrowser_tableunits. When you assign keywords to a unit, this unit is set in this table, too. For this reason the size of this table steadily increases because of data records which must be saved only temporary. Files and directories which exist in the table tx_fefilebrowser_tableunits without any link to other tables should be deleted in periodical intervals.

Media player¶

An optional extension of the application would be the integration of a media player for displaying multimedia files in the preview and an full screen mode. This version only supports the possibility to view text files in the file viewer and images in the slide show.

Send-to-flickr¶

Because of the increasing popularity of flickr a useful extension of this application would be functionality to send images directly to a special flickr account.

Multi-user¶

The current version of this extension is realized for a single user environment. When more users work with this application at the same time some precautions have to be made to prevent inconsistencies. The database table tx_fefilebrowser_tableunits must be extended with the status Open, because you aren't allowed to delete, rename, move (and so on) opened files and directories.

Editor for text and images¶

A further interesting aspect is the enhancement of the application with an internal editor for text files and images.

Upload over ftp¶

The current upload process is realized with the Copy function (http). In the case of problems in the live version with the Copy function you can evade the according ftp functions.

Fallback alternative¶

Although the extension was designed and realized as an Ajax application, an advantage would be to offer a fallback alternative for users without JavaScript. This application would resign of all the Ajax advantages but it guarantees accessibility.

Find deleted units¶

In a final version of the extension you should clarify if the user can find deleted files and directories with the search function. The current version finds all files and directories independent of this fact. If it is not desired to find deleted units, a test if the unit is cut or deleted should be added. Unavailable Elements shouldn't be listed in the search result.

Alternative views of directory content¶

An interesting extension of the application is the integration of alternative views of the directory content. The current version offers only a detail view. Imaginable further views could be a list view or a thumbnail view of the content. The thumbnails are already generated in the current version, you only have to realize the correct formatting of the application interface.

Labelling of trash and paste icon¶

In order to give further information about how much files and directories currently exist in the trash folder and which units exit in the clipboard, an according labelling of the icons could be useful (paste icon --> name of the element, trash icon --> counter how much elements are in the trash).

Highlighting of current language¶

Another feature which can be realized is the highlighting of the current selected language in the meta navigation.

Show current directory size¶

An interested aspect is to display the size of directories. For realization of this feature you have to save the current size of every directory in the database. Whenever the file system of the server is changed, the size of all affected directories must be changed and the database must be refreshed.

Email formatting¶

The formatting of the sent email is another aspect to realize. The current version of the extension offers a plain text email without any individual style.

„Tree and Details“ too large¶

When you have a lot of elements in your list and you want to drag elements into a directory on the tree view, it could happen that you can't reach the requested directory on the tree. That's why the tree and the preview view on the left and the modules on the right side are fixed apart from a defined y position. When the elements have a fixed position they don't scroll. A resulting problem is that the elements are “jumping” when the browser offers to scroll as effect of the size of the left and right elements.

Logging of attacks¶

An enhancement in view of security will be to log attacks.