Search code examples
javascriptangularngrxfilelist

How to save FileList in ngrx store Angular?

I am trying to save FileList in ngrx store, but when I try to store it then in redux developer tools it shows :

 files: {0: {}}

But when I do console.log then I am passing this data to save in the store:

FileList {0: File, length: 1}
0: File
lastModified: 1658383941089
lastModifiedDate: Thu Jul 21 2022 08:12:21 GMT+0200 (Ora legale dell’Europa centrale) {}
name: "milan-to-sestSanGiovanni.jpeg"
size: 2865736
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File
length: 1
[[Prototype]]: FileList

I would like to know is it possible to store FileList/File in the ngrx store? If it is possible then how can be it done. Thank you

Solution

  • This is because the redux developer tools show the JSON version of the objects. A filelist cannot be serialized (you can test this with JSON.stringify(files)).

    Depending on the configured runtime checks the object can be saved to the store (the state and action need to contain serializable state). This can be turned off, this has as result that the object will be persisted in the store, but the redux devtools won't be able to display it correctly.

    https://ngrx.io/guide/store/configuration/runtime-checks