Adding support for reading file value in event. Fixes #250

Author: davidkpiano

src/utils/index.js

@@ -33,19 +33,26 @@ function isEvent(event) {
 }
 
 function getEventValue(event) {
-  if (!event.target) {
+  const { target } = event;
+
+  if (!target) {
     if (!event.nativeEvent) {
       return undefined;
     }
 
     return event.nativeEvent.text;
   }
 
-  if (event.target.multiple) {
-    return [...event.target.selectedOptions].map(option => option.value);
+  if (target.type === 'file') {
+    return [...target.files]
+      || (target.dataTransfer && [...target.dataTransfer.files]);
+  }
+
+  if (target.multiple) {
+    return [...target.selectedOptions].map(option => option.value);
   }
 
-  return event.target.value;
+  return target.value;
 }
 
 function getValue(value) {

test/field-component-spec.js

@@ -454,6 +454,40 @@ describe('<Field /> component', () => {
     });
   });
 
+  describe('with <input type="file" />', () => {
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+      testForm: formReducer('test'),
+      test: modelReducer('test', { foo: [] }),
+    }));
+
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Field model="test.foo">
+          <input type="file" />
+        </Field>
+      </Provider>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+    TestUtils.Simulate.change(input, {
+      target: {
+        type: 'file',
+        files: [
+          { name: 'first.jpg' },
+          { name: 'second.jpg' },
+        ],
+      },
+    });
+
+    assert.deepEqual(
+      store.getState().test.foo,
+      [
+        { name: 'first.jpg' },
+        { name: 'second.jpg' },
+      ]);
+  });
+
   describe('with <select>', () => {
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       testForm: formReducer('test'),