CODEWITHSUNDEEP
javascriptimagereactjsfilereader
str8up7od
str8up7od

Reputation: 348

React/Javascript--FileReader/<input/>/adding image

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)

Upvotes: 0

Views: 1557

Answers (1)

guest271314
guest271314

Reputation: 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.

Upvotes: 1

Related Questions