0

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 componentDidMount(){...} and to be used if the user decides not to upload an image. I have been unable to get this to work, please help. avatar is the image I want to use as a default. <ImageUpload /> uses base64url encoding to work. x.img initially is {}. I tried to call _handleImageChange and pass in avatar. I tried to use a defaultValue={avatar} on #profile-img 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:

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 = () => {

        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 = (<img id='img-preview' alt='file to upload'  src={imagePreviewUrl} />);
  }

  return (
    <div>
        <input id='profile-img' type="file"  onChange={this._handleImageChange } />
      {$imagePreview}
      <button onClick={()=>console.log(this.props)}>see state</button>
    </div>
  )
}

  }

  export const mapStateToProps = state => {
  return {
    img:state.oneReducer.img
  }
  }

  export default connect(mapStateToProps)(ImageUpload)

1 Answer 1

1

The only possible approach that am aware of which allows setting .files property of <input type="file"> element is to set the .files property to a FileList object, see What happens between uploading a file to an HTML form and submitting it?.

The FileList object can be retrieved from the <input type="file"> element .files property itself or .files property of DataTransfer object.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.