Added File Field selection handler + example

gitana · Aug 17, 2013 · a071c75 · a071c75
1 parent e1c5578
commit a071c75
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 10 deletions.
diff --git a/examples/components/fields/file-field.html b/examples/components/fields/file-field.html
@@ -181,6 +181,48 @@ <h2>Example 3:</h2>
                                 });
                             </script>
 
+                            <!-- example #4 -->
+                            <h2>Example 4: </h2>
+                            <p>Select a file with instant thumbnail preview</p>
+                            <div id="imageInfo" style="display:none">
+                                <table>
+                                    <tr>
+                                        <td nowrap class="imagePreview" style="width: 220px">
+                                        </td>
+                                        <td width="100%" class="imageProperties">
+                                        </td>
+                                    </tr>
+                                </table>
+                            </div>
+                            <div id="field4"></div>
+                            <script type="text/javascript" id="field4-script">
+                                $(function() {
+                                    $("#field4").alpaca({
+                                        "schema": {
+                                            "type": "string",
+                                            "format": "uri"
+                                        },
+                                        "options": {
+                                            "type": "file",
+                                            "label": "Upload an image file",
+                                            "selectionHandler": function(files, data) {
+
+                                                var img = $(".imagePreview").html("").append("<img style='max-width: 200px; max-height: 200px' src='" + data[0] + "'>");
+
+                                                var p = $(".imageProperties").html("").append("<p></p>");
+                                                $(p).append("Name: " + files[0].name + "<br/>");
+                                                $(p).append("Size: " + files[0].size + "<br/>");
+                                                $(p).append("Type: " + files[0].type + "<br/>");
+
+                                                $("#imageInfo").css({
+                                                    "display": "block"
+                                                });
+                                            }
+                                        }
+                                    });
+                                });
+                            </script>
+
 
                             <!-- BEGIN DISCUSSIONS -->
                             <div class="alpaca-discussions"></div>

diff --git a/js/ControlField.js b/js/ControlField.js
@@ -140,22 +140,22 @@
             if (this.field)
             {
                 this.field.keypress(function(e) {
-                    _this.onKeyPress(e);
+                    _this.onKeyPress.call(_this, e);
                     _this.trigger("keypress", e);
                 });
 
                 this.field.keyup(function(e) {
-                    _this.onKeyUp(e);
+                    _this.onKeyUp.call(_this, e);
                     _this.trigger("keyup", e);
                 });
 
                 this.field.keydown(function(e) {
-                    _this.onKeyDown(e);
+                    _this.onKeyDown.call(_this, e);
                     _this.trigger("keydown", e);
                 });
 
                 this.field.click(function(e) {
-                    _this.onClick(e);
+                    _this.onClick.call(_this, e);
                     _this.trigger("click", e);
                 });
             }

diff --git a/js/Field.js b/js/Field.js
@@ -1240,21 +1240,26 @@
             {
                 // trigger control level handlers for things that happen to input element
                 this.field.change(function(e) {
-                    _this.onChange(e);
+                    _this.onChange.call(_this, e);
+                    _this.trigger("change", e);
                 });
 
                 this.field.focus(function(e) {
-                    _this.onFocus(e);
+                    _this.onFocus.call(_this, e);
+                    _this.trigger("focus", e);
                 });
 
                 this.field.blur(function(e) {
-                    _this.onBlur(e);
+                    _this.onBlur.call(_this, e);
+                    _this.trigger("blur", e);
                 });
                 this.field.mouseover(function(e) {
-                    _this.onMouseOver(e);
+                    _this.onMouseOver.call(_this, e);
+                    _this.trigger("mouseover", e);
                 });
                 this.field.mouseout(function(e) {
-                    _this.onMouseOut(e);
+                    _this.onMouseOut.call(_this, e);
+                    _this.trigger("mouseout", e);
                 });
 
                 // register general event handlers through options

diff --git a/js/fields/basic/FileField.js b/js/fields/basic/FileField.js
@@ -46,6 +46,53 @@
             // switch it back to actual file input
             this.field = tmp;
         },
+
+        onChange: function(e)
+        {
+            this.base(e);
+
+            if (this.options.selectionHandler)
+            {
+                this.processSelectionHandler(e.target.files);
+            }
+        },
+
+        processSelectionHandler: function(files)
+        {
+            if (files && files.length > 0)
+            {
+                // if the browser supports HTML5 FileReader, we can pull in the stream for preview
+                if (typeof(FileReader) !== "undefined")
+                {
+                    // clear out previous loaded data
+                    var loadedData = [];
+                    var loadCount = 0;
+
+                    var fileReader = new FileReader();
+                    fileReader.onload = (function() {
+                        var field = this;
+                        return function(event)
+                        {
+                            var dataUri = event.target.result;
+
+                            loadedData.push(dataUri);
+                            loadCount++;
+
+                            if (loadCount === files.length)
+                            {
+                                field.options.selectionHandler.call(field, files, loadedData);
+                            }
+                        }
+                    }).call(this);
+
+                    for (var i = 0; i < files.length; i++)
+                    {
+                        fileReader.readAsDataURL(files[i]);
+                    }
+                }
+            }
+        },
+
 
         /**
          * @see Alpaca.Fields.TextField#postRender
@@ -56,8 +103,41 @@
 			if (this.fieldContainer) {
 				this.fieldContainer.addClass("alpaca-controlfield-file");
             }
+
+            // listen for change events on the field
         },//__BUILDER_HELPERS
-
+
+        /**
+         * @private
+         * @see Alpaca.ControlField#getSchemaOfOptions
+         */
+        getSchemaOfOptions: function() {
+            return Alpaca.merge(this.base(), {
+                "properties": {
+                    "selectionHandler": {
+                        "title": "Selection Handler",
+                        "description": "Function that should be called when files are selected.  Requires HTML5.",
+                        "type": "boolean",
+                        "default": false
+                    }
+                }
+            });
+        },
+
+        /**
+         * @private
+         * @see Alpaca.ControlField#getOptionsForOptions
+         */
+        getOptionsForOptions: function() {
+            return Alpaca.merge(this.base(), {
+                "fields": {
+                    "selectionHandler": {
+                        "type": "checkbox"
+                    }
+                }
+            });
+        },
+
 		/**
          * @see Alpaca.Fields.TextField#getTitle
 		 */