Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to store file objects in React Redux store (files upload from DropZone?)

I am currently using Material Ui dropzone to upload multiple files. just wondering what is the best way to add/update files in the redux store. I am currently doing a dispatch action when "onChange" triggers which return all the files on the dropzone and updating the redux state by storing the whole files array which has files object.

please let me know if there is a best way, to handle this.

like image 389
dev0864 Avatar asked May 10 '20 01:05

dev0864


People also ask

Can we store a file in Redux store?

One of the key rules of Redux is that non-serializable values should not go into the store. Because of that, file objects should not be kept in the Redux store if at all possible.

Can you store objects in Redux?

A store is an immutable object tree in Redux. A store is a state container which holds the application's state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer.

How do I store data in local storage in React Redux?

Saving data to localStorage in React is super easy: const [data, setData] = useState([]); useEffect(() => { localStorage. setItem('dataKey', JSON. stringify(data)); }, [data]);


2 Answers

One of the key rules of Redux is that non-serializable values should not go into the store. Because of that, file objects should not be kept in the Redux store if at all possible.

like image 181
markerikson Avatar answered Nov 15 '22 08:11

markerikson


I had a similar problem and ended up using this:

URL.createObjectURL(file)

It returns a url like blob:http://example.com/f331074d-a7f3-4972-9c37-96b490a4dd96 which is just a string and can be used in img tag's src attribute. Not sure what Material Ui dropzone returns, but this works with File objects returned by <input type="file" />

like image 38
jetpackpony Avatar answered Nov 15 '22 08:11

jetpackpony