v1.2.0

CHANGES.md

@@ -1,3 +1,8 @@
+# 1.2.0 / 2015-03-05
+
+Updated to get-form-data v1.2.0 - file input data are now native `File` objects
+when possible.
+
 # 1.1.0 / 2015-02-10
 
 Added: `trimOnSubmit` prop

README.md

@@ -1,8 +1,8 @@
 ## React `<AutoForm>`
 
 An `<AutoForm>` [React](http://facebook.github.io/react/) component, which
-handles getting data from its contained form inputs `onChange` events and/or
-the form's `onSubmit` event, optionally trimming text input.
+simplifies getting data from its contained form inputs via their `onChange`
+events and the form's `onSubmit` event, optionally trimming text input.
 
 ## [Live Demo](http://insin.github.io/react-auto-form/)
 
@@ -74,6 +74,9 @@ submission - this makes it suitable for use in isomorphic apps which configure
 a form for regular submission and progressively enhance form-handling when
 JavaScript runs on the client.
 
+Where available, data extracted from file inputs will be native
+[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.
+
 #### `AutoForm` props
 
 You can pass all the usual form attributes to `AutoForm` (`action`, `method`,
@@ -93,7 +96,7 @@ call the given `onChange` function with the following arguments:
 
 2. `name: String` - the name of the form element which was the target of the event.
 
-3. `data: (null|String|Array.<String>)` - submittable data for the form element which changed.
+3. `data: (null|String|Array.<String>|File|Array.<File>)` - submittable data for the form element which changed.
 
    This value will be as documented for the get-form-data module's
    [`getNamedFormElementData()` return value](https://github.com/insin/get-form-data#return-type-nullstringarraystring).
@@ -104,7 +107,7 @@ call the given `onChange` function with the following arguments:
    * `data` for any other type of input which doesn't have a submittable value
      will be `null`.
 
-4. `change: Object<String, (null|String|Array.<String>)>` - an object containing
+4. `change: Object<String, (null|String|Array.<String>|File|Array.<File>)>` - an object containing
    `{[name]: data}`, for convenience if you're using
    [controlled form components](http://facebook.github.io/react/docs/forms.html#controlled-components)
    and need to call `setState()` on every change.

demo/index.html

@@ -42,6 +42,14 @@
 <div id="app"></div>
 <script type="text/jsx;harmony=true">void function() { 'use strict';
 
+if ('File' in window) {
+  File.prototype.toJSON = function() {
+    debugger
+    var {lastModifiedDate, name} = this
+    return {lastModifiedDate, name}
+  }
+}
+
 var App = React.createClass({
   getInitialState() {
     return {
@@ -125,6 +133,14 @@ <h2>Demo form</h2>
             <label>Security message:</label><br/>
             <textarea name="message"> Hello </textarea>
           </div>
+          <div className="form-field">
+            <label>A cat picture:</label><br/>
+            <input type="file" name="catpic"/>
+          </div>
+          <div className="form-field">
+            <label>Many cat pictures:</label><br/>
+            <input type="file" multiple name="catpics"/>
+          </div>
           <div className="form-field">
             <label>
               <input type="checkbox" name="tos" value="Y" defaultChecked/> I have read and agree to the <a href="#">Terms of Service</a>

dist/react-auto-form.js

@@ -1,5 +1,5 @@
 /*!
- * react-auto-form 1.1.0 - https://github.com/insin/react-auto-form
+ * react-auto-form 1.2.0 - https://github.com/insin/react-auto-form
  * MIT Licensed
  */
 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o;"undefined"!=typeof window?o=window:"undefined"!=typeof global?o=global:"undefined"!=typeof self&&(o=self),o.AutoForm=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
@@ -72,6 +72,7 @@ var CHECKED_INPUT_TYPES = {
 
 var TRIM_RE = /^\s+|\s+$/g
 
+var slice = Array.prototype.slice
 var toString = Object.prototype.toString
 
 /**
@@ -174,8 +175,8 @@ function getNamedFormElementData(form, elementName, options) {
 /**
  * @param {HTMLElement} element a form element.
  * @param {booleam} trim should values for text entry inputs be trimmed?
- * @return {(string|Array.<string>)} the element's submittable value(s), or null
- *   if it had none.
+ * @return {(string|Array.<string>|File|Array.<File>)} the element's submittable
+ *   value(s), or null if it had none.
  */
 function getFormElementValue(element, trim) {
   var value = null
@@ -184,8 +185,10 @@ function getFormElementValue(element, trim) {
     if (element.options.length) {
       value = element.options[element.selectedIndex].value
     }
+    return value
   }
-  else if (element.type === 'select-multiple') {
+
+  if (element.type === 'select-multiple') {
     value = []
     for (var i = 0, l = element.options.length; i < l; i++) {
       if (element.options[i].selected) {
@@ -195,8 +198,26 @@ function getFormElementValue(element, trim) {
     if (value.length === 0) {
       value = null
     }
+    return value
   }
-  else if (!CHECKED_INPUT_TYPES[element.type]) {
+
+  // If a file input doesn't have a files attribute, fall through to using its
+  // value attribute.
+  if (element.type === 'file' && 'files' in element) {
+    if (element.multiple) {
+      value = slice.call(element.files)
+      if (value.length === 0) {
+        value = null
+      }
+    }
+    else {
+      // Should be null if not present, according to the spec
+      value = element.files[0]
+    }
+    return value
+  }
+
+  if (!CHECKED_INPUT_TYPES[element.type]) {
     value = (trim ? element.value.replace(TRIM_RE, '') : element.value)
   }
   else if (element.checked) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-auto-form",
-  "description": "A React component which simplifies getting user input from forms onChange and onSubmit",
-  "version": "1.1.0",
+  "description": "A React component which simplifies getting user input from forms via nChange and onSubmit",
+  "version": "1.2.0",
   "main": "./lib/index.js",
   "standalone": "AutoForm",
   "homepage": "https://github.com/insin/react-auto-form",
@@ -15,7 +15,7 @@
     "forms"
   ],
   "dependencies": {
-    "get-form-data": "^1.1.0"
+    "get-form-data": "^1.2.0"
   },
   "peerDependencies": {
     "react": ">=0.12.0"