mother / react-files

A file input (dropzone) management component for React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Usability with Redux Forms

MHerszak opened this issue · comments

Hi,

I am playing with react-files and noticed it doesn't play well with field arrays (redux-forms). The reason is the usage of your inner files state. I am adding files to several entries in a collection of documents with redux forms and I only instantiate react-files once. The state is kept the same in react-files while I am expecting to handle my own state in my field array. That means I have to filter through all incoming files onChange and I have to think about remove and removeAll twice (remove for field array and remove for react-files state).

My question, is there a way for react-files to leave the state handling to the parent component instead of the react-files component? I was going through the src and noticed you are using state quite a bit.

Thanks for your repo!

Thanks @MHerszak. Just to clarify, you're thinking that the parent component would pass down it's own internally-managed array of file objects? Something like the following?

<Files files={this.state.files} />

I do agree that react-files should play nicer with redux-form, though I'm not sure that removing internal state is the best way to accomplish this (though I do understand the issue you mention with maintaining it in two places if you're using redux-form). One of the main motives of creating this library was to make it easy to add file uploading without too much configuration or management, while also allowing options for more complex use cases. I'll try and hash out an elegant solution (and a demo that uses redux-form) that addresses the issue you bring up sometime this week.

Hey, thanks for your response! I am not hurting at the moment. This is just something I have to keep track off. I have it working at the moment but just passing a state and disregard the inner state would already help. I might have to refactor this field component anyway.