Redux Store not taking Image File

Question

I have implemented a image uploader in my project. Image which I am uploading is working fine. I then wished to save the image to redux store instead of local state.

So I created my actions and reducers and dispatched it. I get my file in the reducer which I checked using console. And my store is also getting updated but instead of getting file in store I get empty object.

reducer

case 'UPDATE_IMAGEFILE_INFO': 
            return ({
                ...state,
                myCustomTemplate: state.myCustomTemplate.map((panel) => {
                    if(panel.name === action.panelName){
                        return { ...panel, components: panel.components.map((component) => {

                            if(component.id === action.compId){
                                console.log(action.info);
                                return { ...component, imagefile: {...action.info}};
                            }
                            else{
                                return component;
                            }
                        })}
                    }
                    else{
                        return panel;
                    }
                })
            });

action

export const updateImageFile = (info, panelName, compId) => {
    return {
        type: 'UPDATE_IMAGEFILE_INFO',
        info,
        panelName,
        compId
    }
}

component

import React from 'react';
import {connect} from 'react-redux';
import { updateImageFile } from '../../actions/resumeBuilder';

class EditImageUpload extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      imagePreviewUrl: ''
    };
  }

  _handleSubmit(e) {
    e.preventDefault();
    this.props.dispatch(updateImageFile(this.state.file, this.props.match.params.pid, parseInt(this.props.match.params.id)));
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.readImageFile(file);
  }

  readImageFile(file){
    console.log(file);
    let reader = new FileReader();
    reader.onloadend = () => {
        this.setState({
            file: file,
            imagePreviewUrl: reader.result
        });
    }
    reader.readAsDataURL(file)
  }

  getInfo = () => {
  if (this.state.imagePreviewUrl) {
      return (<img src={this.state.imagePreviewUrl} />);
  } 
  else {
      return (<div className="previewText">Please select an Image for Preview</div>);
  }
  }
  render() {
    return (
        <div className="previewComponent">
            <form onSubmit={(e)=>this._handleSubmit(e)}>
                <input className="fileInput" type="file" onChange={(e)=>this._handleImageChange(e)} />
                <button className="submitButton" type="submit" onClick={(e)=>this._handleSubmit(e)}>Add</button>
            </form>
            <div className="imgPreview">
                {this.getInfo()}
            </div>
        </div>
    )
  }
}



const ConnectEditImageUpload = connect()(EditImageUpload);
export default ConnectEditImageUpload;

If anymore code you want pls mention.

Q1 Why is the state change no reflecting anything? Q2 Can we store an image as file?

---Update of logs----

What does your mapStateToProps and mapDispatchToProps look like? — Paul McLoughlin, Aug 01 '18 at 09:23
Link your entire component code that is using the updateImageFile. — Paul McLoughlin, Aug 01 '18 at 09:23
No error message. My state gets updated but is showing empty object instead of a file — Ladoo, Aug 01 '18 at 09:29
comment out the reducer logic and add a console.log with the passed arguments from the action. — Paul McLoughlin, Aug 01 '18 at 09:31
yes, try that, then if that works, it will be the logic of the reducer that is the issue, or the details are not being passed to action. check if the are not empty. — Paul McLoughlin, Aug 01 '18 at 09:33
I have tried that and I am getting file in log and also I tried with passing different object and I can see the object in redux but not the file object — Ladoo, Aug 01 '18 at 09:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/177167/discussion-between-paul-mcloughlin-and-ladoo). — Paul McLoughlin, Aug 01 '18 at 09:36
I am also facing same issue. And I have tried all possibilities but in vain. — Shoaib, Jul 19 '21 at 07:22

score -1 · Answer 1 · answered Aug 21 '21 at 03:08

It's my understanding that redux devtools is uncapable of showing files. Image is stored in the state, however since devtools cant show you that, it'll pass an empty object.

Try console.log(image) after passing the image to the reducer, and it should be stored in the reduxt state.

Redux Store not taking Image File

1 Answers1