title: How to only dispatch FileList from dataTransfer after File items are loaded
body: <p>I'm using a Node package module called react-dropzone and React-Redux to allow users to drag a file onto the window and display the file info. </p>
  
  <p>The react-dropzone component is giving me the FileList from the standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" rel="noreferrer">event.dataTransfer.files</a>. </p>
  
  <p>The problem I'm having is that when I dispatch that FileList to the Redux store, the File items aren't yet loaded in the FileList array, so when I dispatch the File data, I just get <code>{"preview":"blob:file:///f30eafb8-8a77-4402-9111-379590b4a03f"}</code>.</p>
  
  <p>If I log the File items to the console, they show up just fine because their data is loaded by the time I look at it but I can't figure out how to only dispatch the file information after it's loaded.</p>
  
  <p>Here's an example of what I see if I log one of the File items to the console from the FileList array.</p>
  
  <pre><code>{
    lastModified: 1473709614000,
    lastModifiedDate: Mon Sep 12 2016 12:46:54 GMT-0700 (PDT),
    name: "test_image.jpg",
    path: "/Users/mitchconquer/Desktop/test_image.jpg",
    preview: "blob:file:///0fe69686-125d-464a-a0a8-a42e497d3808",
    size: 41805,
    type: "image/jpeg",
    webkitRelativePath: ""
  }
  </code></pre>
  
  <p>I believe the problem is just that the File object isn't fully loaded, but I can't figure out a way to only fire the action once the data is fully loaded. Could someone point me on the right path?</p>
  
  <p>Here's my component that's using react-dropzone:</p>
  
  <pre><code>// FileDrop.js
  import React, { Component, PropTypes } from 'react';
  import { Link } from 'react-router';
  import styles from './Home.css';
  import Dropzone from 'react-dropzone';
  
  export default class FileDrop extends Component {
    static propTypes = {
      message: PropTypes.string.isRequired,
      setFile: PropTypes.func.isRequired
    };
  
    onDrop(files, event) {
      console.log({files});
      this.props.setFile(files);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Dropzone onDropAccepted={this.onDrop.bind(this)} multiple={false} disablePreview={false}&gt;
            &lt;div&gt;{this.props.message}&lt;/div&gt;
          &lt;/Dropzone&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>...and here's my action file that has the <code>setFile</code> method that's used in the above <code>onDrop</code> method:</p>
  
  <pre><code>// actions/files.js
  export const SET_FILE = 'SET_FILE';
  
  // ACTION CREATORS
  
  function _setFile(file) {
    return {
      type: SET_FILE,
      file
    };
  }
  
  // ACTION CREATOR CREATORS
  
  export function setFile(file) {
    return _setFile(file[0]);
  }
  </code></pre>
  
  <p>...and here's the reducer that's handling that action:</p>
  
  <pre><code>// reducers/files.js
  import { SET_FILE } from '../actions/files';
  
  export const initialState = [];
  
  export default function files(state = initialState, action = {}) {
    switch (action.type) {
      case SET_FILE:
        const newState = state.slice();
        const file = action.file;
        newState.push(file);
        return newState;
      default:
        return state;
    }
  }
  </code></pre>