How to save File object array in redux store?

Question

I want to save the file object array in redux store.

This is the code about reducers

    case types.SET_PICTURE:
      console.log("action");
      console.log(action.newPictureFiles);
      console.log(action.newPictureDataURLs);
      return {
        ...state,
        inquiryForm: {
          ...state.inquiryForm,
          pictureFiles: [...action.newPictureFiles],
          pictureDataURLs: [...action.newPictureDataURLs]
        }
      };

This code is about dispatch

class Attachment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pictureFiles: this.props.pictureFiles,
      pictureDataURLs: this.props.pictureDataURLs,
      uploadedURLs: []
    };
    this.onDrop = this.onDrop.bind(this);
  }

  onDrop(pictureFiles, pictureDataURLs) {
    // pictureFiles = [{File object}, {File object}, {File object}]
    console.log("onDrop")
    console.log(pictureFiles);
    console.log(pictureDataURLs);
    this.props.onSetPicture(pictureFiles, pictureDataURLs)
    this.setState({
      pictureFiles: pictureFiles,
      pictureDataURLs: pictureDataURLs,
    });
  }

console.log( action.newPictureFiles ) print well like this[File object array in chrome dbg], after reducer function case types.SET_PICTURE:, redux print empty obj like this[redux result]. Why reducers cannot save the File object in redux store. and How to fix it?

Can you post the code where you dispatch the action with those file array. did you convert the data to form data?. — TRomesh
– TRomesh, Commented Jun 11, 2019 at 3:31

sachin kalekar · Accepted Answer · 2019-06-11 03:48:31Z

1

Your action.newPictureFiles has the file but it not shown because console log will print the file as an empty obj.

Please use this to log all your data considering your action.newPictureFiles is array of files.

action.newPictureFiles.forEach(file => {
    for (var pair of file.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
    }
})

or just this for each file

for (var pair of file.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

answered Jun 11, 2019 at 3:48

sachin kalekar

5363 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

bearics Over a year ago

console.log(action.newPictureFiles); say like this image[i.sstatic.net/Kkcl8.png] but, redux look like this image[i.sstatic.net/r7hPb.png]

bearics Over a year ago

sorry, I did not explain the question well. console.log( action.newPictureFiles ) print well, after reducer function case types.SET_PICTURE:, redux print empty obj like this[i.sstatic.net/r7hPb.png].

Ferrybig Over a year ago

Your answer has incorrect information, the console is capable of printing file objects just fine. Only redux dev tools doesn't show it, since it tries to convert it to json

sachin kalekar Over a year ago

Can you please show us action creator onSetPicture

bearics Over a year ago

@Ferrybig Thank you, I'll check it again and it does well. Redux save File object but I couldn't see it well in the chrome redux window. When I try console.log(), I can find it. Thank you!!

|

Collectives™ on Stack Overflow

How to save File object array in redux store?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related