update file input

demos/fileinput/js/fileinput.js

@@ -3,7 +3,7 @@ Ox.load('UI', function() {
     //Ox.Theme('modern');
 
     Ox.FileInput({
-            //maxFiles: 1,
+            maxFiles: 1,
             width: 256
         })
         .css({
@@ -13,4 +13,14 @@ Ox.load('UI', function() {
         })
         .appendTo(Ox.UI.$body);
 
+    Ox.FileInput({
+            width: 256
+        })
+        .css({
+            position: 'absolute',
+            left: '16px',
+            top: '48px'
+        })
+        .appendTo(Ox.UI.$body);
+
 });

source/Ox.UI/js/Form/Ox.FileInput.js

@@ -8,6 +8,7 @@ Ox.FileInput = function(options, self) {
             maxFiles: -1,
             maxLines: -1,
             maxSize: -1,
+            value: [],
             width: 256
         })
         .options(options || {})
@@ -15,7 +16,6 @@ Ox.FileInput = function(options, self) {
         .css({width: self.options.width + 'px'});
 
     self.multiple = self.options.maxFiles != 1;
-    self.files = [];
     self.size = 0;
 
     self.$bar = Ox.Bar({size: 14})
@@ -163,24 +163,27 @@ Ox.FileInput = function(options, self) {
             });
         }
         files.sort(self.options.maxSize == -1 ? function(a, b) {
-            return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+            a = a.name.toLowerCase();
+            b = b.name.toLowerCase();
+            return a < b ? -1 : a > b ? 1 : 0;
         } : function(a, b) {
+            // if there's a max size,
+            // try to add small files first
             return a.size - b.size;
         }).forEach(function(file) {
             if (!exists(file) && (
                 self.options.maxFiles == -1
-                || self.files.length < self.options.maxFiles
+                || self.options.value.length < self.options.maxFiles
             )) {
                 if (
                     self.options.maxSize == -1
                     || self.size + file.size < self.options.maxSize
                 ) {
-                    self.files.push(file);
+                    self.options.value.push(file);
                     self.size += file.size;
                 }
             }
         });
-        Ox.print('FILES:::', files);
         self.$text.html(getText());
         self.$size.html(getSize());
         if (self.multiple) {
@@ -191,7 +194,7 @@ Ox.FileInput = function(options, self) {
             self.$files.css({height: getHeight()}).show();
             self.$list.options({items: getItems()});
             if (
-                self.files.length == self.options.maxFiles
+                self.options.value.length == self.options.maxFiles
                 || self.size == self.options.maxSize
             ) {
                 self.$button.options({disabled: true});
@@ -200,19 +203,21 @@ Ox.FileInput = function(options, self) {
             self.$button.options({title: 'close'}).attr({title: 'Clear'});
             self.$input.hide();
         }
+        that.triggerEvent('change', {value: self.options.value});
     }
 
     function clearFile() {
-        self.files = [];
+        self.options.value = [];
         self.size = 0;
         self.$text.html(getText());
         self.$size.html(getSize());
         self.$button.options({title: 'add'}).attr({title: ''});
         self.$input.show();
+        that.triggerEvent('change', {value: self.options.value});
     }
 
     function exists(file) {
-        return self.files.some(function(f) {
+        return self.options.value.some(function(f) {
             return f.name == file.name
                 && f.size == file.size
                 && Ox.isEqual(f.lastModifiedDate, file.lastModifiedDate);
@@ -222,13 +227,13 @@ Ox.FileInput = function(options, self) {
     function getHeight() {
         return (
             self.options.maxLines == -1
-                ? self.files.length
-                : Math.min(self.files.length, self.options.maxLines)
+                ? self.options.value.length
+                : Math.min(self.options.value.length, self.options.maxLines)
         ) * 16 + 'px';
     }
 
     function getItems() {
-        return self.files.map(function(file, i) {
+        return self.options.value.map(function(file, i) {
             return {name: file.name, size: file.size, id: i};
         });
     }
@@ -238,22 +243,22 @@ Ox.FileInput = function(options, self) {
     }
 
     function getText() {
-        var length = self.files.length
+        var length = self.options.value.length
         return length == 0
             ? 'No file' + (self.multiple ? 's' : '') + ' selected'
             : self.multiple
             ? length + ' file' + (length == 1 ? '' : 's') + ' selected'
-            : self.files[0].name;
+            : self.options.value[0].name;
     }
 
     function removeFiles(ids) {
-        self.files = self.files.filter(function(v, i) {
+        self.options.value = self.options.value.filter(function(v, i) {
             return ids.indexOf(i) == -1;
         });
-        self.size = self.files.reduce(function(prev, curr) {
+        self.size = self.options.value.reduce(function(prev, curr) {
             return prev + curr.size;
         }, 0);
-        if (self.files.length == 0) {
+        if (self.options.value.length == 0) {
             self.$bar.css({
                 borderBottomLeftRadius: '8px',
                 borderBottomRightRadius: '8px'
@@ -264,6 +269,7 @@ Ox.FileInput = function(options, self) {
         self.$size.html(getSize());
         self.$list.options({items: getItems(), selected: []});
         self.$files.css({height: getHeight()});
+        that.triggerEvent('change', {value: self.options.value});
     }
 
     return that;