{"id":2844,"date":"2015-05-19T18:49:47","date_gmt":"2015-05-19T14:49:47","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2844"},"modified":"2023-05-05T13:41:23","modified_gmt":"2023-05-05T10:41:23","slug":"file-system-with-dhtmlxfileselector","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/file-system-with-dhtmlxfileselector\/","title":{"rendered":"Your Actual File System with dhtmlxFileSelector"},"content":{"rendered":"

Not so long ago we presented a macro component<\/a> 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.<\/p>\n

\"file-select\"
\n
\nWhat is dhtmlxFileSelector?<\/strong><\/p>\n

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.<\/p>\n

Features<\/strong><\/p>\n

1) Representation of your actual file system.<\/p>\n

2) Integration with dhtmlxForm.
\n\"file<\/p>\n

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.<\/p>\n

3) Localization support<\/p>\n

Standard functionality also includes localization support for buttons, windows caption and grid columns.<\/p>\n

\"localization-fileselector-de\"<\/p>\n

Usage<\/strong><\/p>\n

1) Include dhtmlx.js\/css and dhtmlxfileselector.js\/css on your page.<\/p>\n

Note: dhtmlx js\/css should be inserted before dhtmlxfileselector js\/css:<\/p><\/blockquote>\n

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

2) Create an instance of FileSelector:<\/p>\n

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

3) After you inited FileSelector, you need to attach the onSelect event to handle file that is selected by the user:<\/p>\n

var<\/span> myFileSelector.attachEvent<\/span>(<\/span>"onSelect"<\/span>,<\/span> function<\/span>(<\/span>id)<\/span>{<\/span>
\n    \/\/ your code here<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

4) Show dialog window:<\/p>\n

myFileSelector.show<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

That\u2019s all you need to start using the component right now.<\/p>\n

Note: If you’d like to use FileSelector as part of the form, you need the following init:<\/p><\/blockquote>\n

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

Package includes examples that demonstrate how to read your file system, generate xml response and how to customize grid columns.<\/p>\n

Download links<\/strong><\/p>\n

If you’re already using dhtmlxSuite, you may download the separate package of dhtmlxFileSelector. Download dhtmlxFileSelector.<\/a><\/p>\n

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.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 …<\/p>\n","protected":false},"author":2,"featured_media":3413,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,72,1,38],"tags":[33,18],"class_list":["post-2844","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-general","category-uncategorized","category-visible","tag-all-posts","tag-labs"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2844"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2844\/revisions"}],"predecessor-version":[{"id":11399,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2844\/revisions\/11399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3413"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}