CODEWITHSUNDEEP
javascriptreactjs
user9763166
user9763166

Reputation: 65

Uncaught TypeError: Cannot read property 'props' of undefined in reactJS when uploading image

I want to let users to upload images but when I try to call uploadhandler, i get error. If I call this.props.uploadDocumentRequest outside of handleFileUpload, there no problem. But when I call it inside of the handler I get the error. I'm using React and Redux.

This is the code:

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";

class File extends Component {
  handleFileUpload(event) {
    const file = event.target.files[0];
    console.log(file, file.name);
    this.props.uploadDocumentRequest({
      file,
      name: file.name
    });
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleFileUpload} />
      </div>
    );
  }
}

export default connect(null, actions)(File);

This is the error i get:

Appreciate your help in advance! enter image description here

Upvotes: 0

Views: 441

Answers (1)

Dan
Dan

Reputation: 817

Either bind() your function or use an arrow function.

a) Inside your constructor (when you add one)

this.handleFileUpload = this.handleFileUpload.bind(this)

b) Use an arrow function, change your function to

handleFileUpload = () => {
  // your function body
}

Upvotes: 1

Related Questions