diff --git a/examples/selecting_files/index.html b/examples/selecting_files/index.html
new file mode 100644
index 00000000..c2e86ce6
--- /dev/null
+++ b/examples/selecting_files/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Selecting Files
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/selecting_files/js/example.js b/examples/selecting_files/js/example.js
new file mode 100644
index 00000000..97c0ebc9
--- /dev/null
+++ b/examples/selecting_files/js/example.js
@@ -0,0 +1,139 @@
+/*
+...
+*/
+
+Ox.load('UI', function() {
+
+ var $menu = Ox.MainMenu({
+ menus: [
+ {id: 'file', title: 'File', items: [
+ {id: 'file', title: 'Select File...', file: {
+ maxFiles: 1, width: 96
+ }},
+ {id: 'files', title: 'Select Files...', file: {
+ width: 96
+ }}
+ ]}
+ ]
+ })
+ .bindEvent({
+ click: function(data) {
+ showEvent(data);
+ openDialog(data);
+ }
+ }),
+ $main = Ox.Element()
+ .append(
+ Ox.FileButton({
+ maxFiles: 1,
+ title: 'Select File...',
+ width: 128
+ })
+ .css({position: 'absolute', left: '16px', top: '16px'})
+ .bindEvent({click: showEvent})
+ )
+ .append(
+ Ox.FileButton({
+ title: 'Select Files...',
+ width: 128
+ })
+ .css({position: 'absolute', left: '16px', top: '48px'})
+ .bindEvent({click: showEvent})
+ )
+ .append(
+ Ox.FileInput({
+ maxFiles: 1,
+ maxSize: 1000000,
+ width: 256
+ })
+ .css({position: 'absolute', left: '16px', top: '80px'})
+ .bindEvent({click: showEvent})
+ )
+ .append(
+ Ox.FileInput({
+ maxSize: 1000000,
+ width: 256
+ })
+ .css({position: 'absolute', left: '16px', top: '112px'})
+ .bindEvent({click: showEvent})
+ ),
+ $list = Ox.TreeList({
+ data: {},
+ expanded: true,
+ width: 256
+ }),
+ $innerPanel = Ox.SplitPanel({
+ elements: [
+ {element: $main},
+ {element: $list, size: 256}
+ ],
+ orientation: 'horizontal'
+ }),
+ $outerPanel = Ox.SplitPanel({
+ elements: [
+ {element: $menu, size: 20},
+ {element: $innerPanel}
+ ],
+ orientation: 'vertical'
+ })
+ .appendTo(Ox.$body);
+
+ function openDialog(data) {
+ var $content = Ox.Element()
+ .css(getContentCSS(data))
+ .append(
+ Ox.FileInput({
+ maxFiles: data.id == 'file' ? 1 : -1,
+ value: data.files,
+ width: 256
+ })
+ .css({
+ position: 'absolute',
+ left: '16px',
+ top: '16px',
+ marginBottom: '16px'
+ })
+ .bindEvent({
+ change: function(data) {
+ showEvent(data);
+ $content.css(getContentCSS(data));
+ }
+ })
+ ),
+ $dialog = Ox.Dialog({
+ buttons: [
+ Ox.Button({
+ id: 'close',
+ title: 'Close'
+ })
+ .bindEvent({
+ click: function() {
+ $dialog.close();
+ }
+ })
+ ],
+ content: $content,
+ height: 129,
+ keys: {escape: 'close'},
+ title: data.title.replace('...', ''),
+ width: 288 + (data.id == 'file' ? 0 : Ox.UI.SCROLLBAR_SIZE)
+ })
+ .open();
+ function getContentCSS(data) {
+ return {height: 49 + (data.files || data.value).length * 16 + 'px'};
+ }
+ }
+
+ function showEvent(data) {
+ var key = data.files ? 'files' : 'value';
+ data[key] = data[key].map(function(file) {
+ var object = {};
+ Object.keys(file).forEach(function(key) {
+ object[key] = file[key];
+ });
+ return object;
+ });
+ $list.options({data: data});
+ }
+
+});