Blog

Description

We can use this component to show the user the files he has in his FTP, or to select an image that is saved in the server and show it in some place; we have hundreds of possibles scenarios where we can use this component.

Configuration properties

url (string): defines the URL where the requests are made using Ajax to obtain the directories the component will display, this property is required.

multiSelect (boolean): “true” if the component allows to select different files at the same time, by default is “false”.

filters (string): parameter sent to the server to filter the kind of files to be displayed, the format should be separated by spaces, if there’s more than one, for example “html htm jpg”.

root (string): this parameter specifies the directory that the component will display the first time, is important to remember that the server is not responsible to implement this functionality when sending the files to the assigned directory. By default is “/”.

params(object): parameters that will be send in every request to the server, these parameters will depend on your application.

You can use any configuration of the component “Ext.Window”, for example “title, width, height, etc.”

Methods

show(): this method displays the component on the screen.

You can invoke all the methods of the component “Ext.Window”.

Events

selectfile (Array files): is triggered when the user has selected one or more files, it receives an array as a parameter and it contains objects “Ext.data.Record” with the information of the files.

You can apply all the events that the component “Ext.Window” offers.

Parameters sent to the server

The following parameters are sent to the server through the method “POST”.

isForMainPanel (boolean): this parameter is sent to the server when the request has been made from the dataview store, is very useful to distinguish the requests from the main panel and the requests from the tree.

path (string): is the directory the user has selected to see, in the server we have to get and return the files underneath that directory.

filters (string): in this parameter we sent the file formats we want to filter, the server is reponsible to apply the file’s filter and return the files requested.

Server’s response

The server should return the information in JSON format.

For the folder tree in the left side, the structure of the JSON response needs to be like this:

[{"id":"1","text":"Name to show","url":"\/path\/tol\/the\/file","isFolder":true,"children":[]}]

If you have internal folders, the array “children” should have them defined, this is the structure proposed by the component “Ext.tree.TreePanel” so you must be familiar with it. The additional properties are: “url” which is the path of the file in the server and “isFolder” which is a boolean property that opens the folders when you click on them.

The structure is practically the same for the main panel, we only need to add the property “iconCls” which is a CSS class with the icon we want to show and the array of files must be in the “files” property.

{
files: [{...},{...}] //the previous structure
}

For the main panel is required to have the information returned by the server in a JSON object with the property “files”.

Ways of use

First we need to import the style sheets and the JavaScript component to the HTML like this:

<link rel="stylesheet" type="text/css" href="Ext.ux.FileManager/Ext.ux.FileManager.css" />
<script type="text/javascript" src="Ext.ux.FileManager/Ext.ux.FileManager.js"></script>

Just remember that first you need to include the Ext JS library.

The next thing we need to do is to create an instance of the component “FileManager” like this:

var manager = new Ext.ux.FileManager({
	url: 'getFiles.php'
}); 

manager.show();

To get the files that have been selected by the user we need to add a “listener” to the event “selectfile” like this:

manager.on('selectfile',function(files){
	console.debug(files);
});

Also you can do this by configuring the constructor like this:

var manager = new Ext.ux.FileManager({
	url: 'getFiles',
	listeners:{
		selectfile: function(files){
			console.debug(files);
		}
	}
});

To select more than one file at the same time:

var manager = new Ext.ux.FileManager({
	url: 'getFiles.php',
	multiSelect:true
});

Implementation in the server

The implementation on the server’s side must be written in any language you required according to your project’s needs, you just need to remember the previous specifications.