Getting file data into Redux store

I’m a newbie developer so I hope this is the correct place to put this kind of issue.

I’m using the react-dropzone in a project that is using React-Redux in Electron. I really like it but can’t figure out how to get the file data into my Redux store.

I’m dispatching the file data from my onDrop method but the data isn’t loaded into the Files inside the Filelist, so each one just has the preview key/value.

Here is what my Redux state has for each file: {"preview":"blob:file:///f30eafb8-8a77-4402-9111-379590b4a03f"}

But if I log the file variable to the console, it is fully loaded by the time I view it, so it has all of the data loaded.

{
  lastModified: 1473709614000,
  lastModifiedDate: Mon Sep 12 2016 12:46:54 GMT-0700 (PDT),
  name: "water off a duck's back.jpg",
  path: "/Users/mitchconquer/Desktop/test_image.jpg",
  preview: "blob:file:///0fe69686-125d-464a-a0a8-a42e497d3808",
  size: 41805,
  type: "image/jpeg",
  webkitRelativePath: ""
}

I believe the problem is just that the fiel 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?

Here’s my component that’s using react-dropzone:

// 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 (
      <div>
        <Dropzone onDropAccepted={this.onDrop.bind(this)} multiple={false} disablePreview={false}>
          <div>{this.props.message}</div>
        </Dropzone>
      </div>
    );
  }
}

…and here’s my action file that has the setFile method that’s used in the above onDrop method:

// 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]);
}

…and here’s the reducer that’s handling that action:

// 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;
  }
}

[mitchconquer]

Hi, @ghoshnirmalya and @sandervanhooft I posted my findings on Stack Overflow here. I hope they help you!

[acaceres-convey]

Hey guys I have a question similar to this one… when i drop a file i don’t get the file path… all i get is lastModified: 1471436812784 lastModifiedDate: Wed Aug 17 2016 07:26:52 GMT-0500 (Central Daylight Time) name: "AATDB" preview: "blob:http://localhost:3000/6b3e96a2-93f9-4107-b539-e244104d2acf" size: 4840 type: "" webkitRelativePath: ""