title: How to send a file/image from React to node.js server
body: <p>I'm trying to send a file/image from React to node.js server with multer. The problem is I can send an image only through Postman but when I'm trying the same in React I'm getting: TypeError: Cannot read property 'path' of undefined. I don't understand whether I should send a file/image in binary or use another format. I've already tried to use reader.readAsDataURL() and reader.readAsBinaryString() but it didn't work.</p>
  
  <pre><code>
  const multer = require("multer");
  
  const storage = multer.diskStorage({
    destination: (req, file, cb) =&gt; {
      cb(null, "./uploads/");
    },
    filename: (req, file, cb) =&gt; {
      cb(null, new Date().toISOString() + file.originalname);
    }
  });
  
  const fileFilter = (req, file, cb) =&gt; {
    if (
      file.mimetype === "image/jpeg" ||
      file.mimetype === "image/png" ||
      file.mimetype === "image/jpg"
    ) {
      cb(null, true);
    }
    cb(null, false);
  };
  
  const upload = multer({
    storage: storage,
    limits: { fileSize: 5000000 },
    fileFilter: fileFilter
  });
  
  // Create a post
  router.post(
    "/",
    upload.single("image"),
    passport.authenticate("jwt", { session: false }),
  
    (req, res) =&gt; {
      const { errors, isValid } = validationPostInput(req.body);
      if (!isValid) {
        return res.status(400).json(errors);
      }
      console.log(req.file);
      const newPost = new Post({
        text: req.body.text,
        theme: req.body.theme,
        name: req.body.name,
        avatar: req.body.avatar,
        image: req.file.path,
        user: req.user.id
      });
  
      newPost.save().then(post =&gt; res.json(post));
    }
  );
  
  </code></pre>
  
  <pre><code>  // CREATE A POST
  export const createPost = (userInput, history) =&gt; dispatch =&gt; {
    const headers = {
      "Content-Type": "form-data"
    };
    axios
      .post("/post", userInput, headers)
      .then(res =&gt; history.push("/post/all"))
      .catch(err =&gt;
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      );
  };
  
  
  </code></pre>
  
  <pre><code>   import React, { Component } from "react";
  import PropTypes from "prop-types";
  // import { Link } from "react-router-dom";
  import { connect } from "react-redux";
  import { createPost } from "../../actions/postActions";
  import "./style.css";
  
  class CreatePost extends Component {
    state = {
      text: "",
      theme: "",
      image: "",
      errors: {}
    };
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.errors) {
        this.setState({ errors: nextProps.errors });
      }
    }
  
    onSubmit = e =&gt; {
      e.preventDefault();
  
      const { user } = this.props.auth;
  
      const newPost = {
        text: this.state.text,
        theme: this.state.theme,
        image: this.state.image,
        name: user.username,
        avatar: user.avatar
      };
  
      this.props.createPost(newPost);
    };
    onChange = e =&gt; this.setState({ [e.target.name]: e.target.value });
  
    fileSelectHandler = e =&gt; {
      const param = e.target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(param);
  
      this.setState({
        image: reader.result
      });
      console.log(reader);
    };
  
    render() {
      const { text, theme, errors } = this.state;
  
      return (
        &lt;section className="post"&gt;
          &lt;form
            onSubmit={this.onSubmit}
            className="post__form"
            action="/post"
            method="POST"
            encType="multipart/form-data"
          &gt;
            &lt;div className="post__form--input"&gt;
              &lt;label&gt;Theme&lt;/label&gt;
              &lt;input
                type="text"
                name="theme"
                value={theme}
                onChange={this.onChange}
              /&gt;
              {errors &amp;&amp; &lt;small&gt;{errors.theme}&lt;/small&gt;}
            &lt;/div&gt;
            &lt;div className="post__form--input"&gt;
              &lt;label&gt;Text&lt;/label&gt;
              &lt;textarea
                type="text"
                name="text"
                value={text}
                onChange={this.onChange}
              /&gt;
              {errors &amp;&amp; &lt;small&gt;{errors.text}&lt;/small&gt;}
            &lt;/div&gt;
            &lt;div className="post__form--file"&gt;
              &lt;label&gt;Add Image&lt;/label&gt;
              &lt;input
                type="file"
                name="file"
                accept=".png, .jpg"
                onChange={this.fileSelectHandler}
              /&gt;
            &lt;/div&gt;
            &lt;button type="submit" className="button"&gt;
              Submit
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/section&gt;
      );
    }
  }
  
  CreatePost.propTypes = {
    errors: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    errors: state.errors,
    auth: state.auth
  });
  
  export default connect(
    mapStateToProps,
    { createPost }
  )(CreatePost);
  
  </code></pre>