Redux: Can I store a file (image, png...) in redux store?

[ZhuQinglei]

I am currently using dropzone library to upload files:

I want to save the file in redux for later save to db.

I can read the file I uploaded in the dropzone accept function, but once I save it in redux and refresh the page (I use redux-persist to retain the data), the File becomes an Object, and I could not continue to save it to my server on save button click.

Here is the example:

I am not sure if it is a redux issue or redux-persist issue, does redux allow File to be save in the store?

[sompylasar]

That is neither redux, nor redux-persist issue. That is a limitation of the web platform. You cannot persist objects other than serializable (plain) objects between page reloads.

[asantos00]

However, I think you can store the base64 version of it (it's kinda big, but could work). But yeah, not a limitation of redux, and Dan always said the store should be serializable

[markerikson]

You _can_ store a non-serializable item in the store, but it's usually not the best idea. See this FAQ entry: http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-non-serializable .

And yes, I wouldn't expect File objects to be persistable by the browser.

[viankakrisna]

you can persist file with indexedDB though (at least with chrome as far as i can remember).
(old) example using Dexie https://github.com/viankakrisna/materialplayer/blob/master/assets/js/mp.db.js

[ZhuQinglei]

@sompylasar @asantos00 @markerikson @viankakrisna Thank you so much for the prompt reply! I still have a question.

Since we cannot save the non-serializable object to store, what's the common practice for people that wants to upload images first and confirm save it later on save button click?

[viankakrisna]

@ZhuQinglei i don't have an answer to this 😅 Also, it's a usage question. You should probably better ask it on Stack Overflow.

[asantos00]

I think here is definitely not the right place to ask it. However, I think you can upload the images and store a server reference for them. Imagine you upload an image, the server returns you the uploadedImageId and then you send it later when you save it.
At least I've done it like this

[Gyvastis]

@asantos00 Yes, but what if you'd want to achieve this with a single request?

[embashgit]

i think you can stall the name of the file in redux as:

initialState:{
userImage: 'name.png',
}

and pass it as props to the image tag as