Your Actual File System with dhtmlxFileSelector

| Comments (2)

Not so long ago we presented a macro component for convenient selection of data from database. This time we’d like to share the similar solution, but the purpose of it is quite different – it provides the ability to read your file system easily. So, meet another DHTMLX mini component – dhtmlxFileSelector.

file-select

What is dhtmlxFileSelector?

Like Data Selector, dhtmlxFileSelector represents JavaScript component with rich select functionality. So you have the ability to open a file select dialog to find and select the needed file.

Features

1) Representation of your actual file system. View demo

2) Integration with dhtmlxForm. View demo

file selector with form

We could provide integration with other DHTMLX components. Leave us your comments about where you may use dhtmlxFileSelector, we’ll gladly consider to share ready solutions.

3) Localization support

Standard functionality also includes localization support for buttons, windows caption and grid columns. View demo

localization-fileselector-de

Usage

1) Include dhtmlx.js/css and dhtmlxfileselector.js/css on your page.

Note: dhtmlx js/css should be inserted before dhtmlxfileselector js/css:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxfileselector.css"/>
    <script src="codebase/dhtmlx.js"></script>
    <script src="codebase/dhtmlxfileselector.js"></script>
</head>

2) Create an instance of FileSelector:

var myFileSelector = new dhtmlXFileSelector({
    url: "reader.php",             // url to get data
    image_path: "codebase/imgs/",  // path for grid images
    icons_path: "codebase/imgs/"   // path for toolbar icons
});

3) After you inited FileSelector, you need to attach the onSelect event to handle file that is selected by the user:

var myFileSelector.attachEvent("onSelect", function(id){
    // your code here
});

4) Show dialog window:

myFileSelector.show();

That’s all you need to start using the component right now.

Note: If you’d like to use FileSelector as part of the form, you need the following init:

var formData = [
       {
        type: "fileselector",
        ...,
        url: "data_static.php",
        image_path: "codebase/imgs/",
        icons_path: "codebase/imgs/",
        full_path: true
       },
       ... other form items
];
var myForm = new dhtmlXForm("parentId", formData);

Package includes examples that demonstrate how to read your file system, generate xml response and how to customize grid columns.

Download links

If you’re already using dhtmlxSuite, you may download the separate package of dhtmlxFileSelector. Download dhtmlxFileSelector.

If you aren’t using dhtmlxSuite, please download full package that contains the library with a new mini-component. Download dhtmlxSuite together with FileSelector component.

Comments

  1. Stefan Riedel-Seifert June 16, 2015 at 9:45 pm

    The German translation of ‘cancel’ is not ‘Abschaffen’. It is ‘Abbrechen’.

  2. Werner Neumann May 23, 2016 at 6:04 pm

    This is not running under DHTMLX Suite 5.0 …

Leave a Reply