title: React/Javascript--FileReader/<input/>/adding image
body: <p>I am attempting to set up a default image on a prop that uses FileReader. I want the image to be loaded when the component mounts <code>componentDidMount(){...}</code> and to be used if the user decides not to upload an image. I have been unable to get this to work, please help. <code>avatar</code> is the image I want to use as a default. <code>&lt;ImageUpload /&gt;</code> uses base64url encoding to work. <code>x.img</code> initially is <code>{}</code>. I tried to call <code>_handleImageChange</code> and pass in <code>avatar</code>. I tried to use a <code>defaultValue={avatar}</code> on <code>#profile-img</code> and a few other things that I have since forgotten--but no LUCK. Any insight would be greatly appreciated. THANKS ahead of time! Code below:</p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import './imageupload.css';
  import {addImg} from '../../actions/index2';
  import avatar from './avatar.jpg';
  
  
  
  export class ImageUpload extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      img:{}
    };
    this._handleImageChange = this._handleImageChange.bind(this);
    this._makeFile = this._makeFile.bind(this);
  }
  
  componentDidMount() {
  
  }
  
  _handleImageChange(e) {
      e.preventDefault();
      let reader = new FileReader();
      let file = e.target.files[0];
      console.log('e.target.files[0]', e.target.files[0] )
      reader.onloadend = () =&gt; {
  
          let serializedFile = {
              lastModified: file.lastModified,
              lastModifiedDate:file.lastModifiedDate,
              name:file.name,
              size:file.size,
              type:file.type,
              webkitRelativePath:file.webkitRelativePath
          }
          this.props.dispatch(addImg({ 
              file: serializedFile,
              imagePreviewUrl: reader.result
          }))
          if (this.props.moveImg) {
              this.props.moveImg({
              file: serializedFile,
              imagePreviewUrl: reader.result
          })
          }
      }
    reader.readAsDataURL(file)
  }
  
  render() {
    let x = this.props;
    let {imagePreviewUrl} =  x.img   ;
    let $imagePreview = null;
    if (imagePreviewUrl ) {
      $imagePreview = (&lt;img id='img-preview' alt='file to upload'  src={imagePreviewUrl} /&gt;);
    }
  
    return (
      &lt;div&gt;
          &lt;input id='profile-img' type="file"  onChange={this._handleImageChange } /&gt;
        {$imagePreview}
        &lt;button onClick={()=&gt;console.log(this.props)}&gt;see state&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
    }
  
    export const mapStateToProps = state =&gt; {
    return {
      img:state.oneReducer.img
    }
    }
  
    export default connect(mapStateToProps)(ImageUpload)
  </code></pre>