I am trying to get access to HTMLElementInput.files.path to send to my backend for cloudinary to process. The problem I am running into is there is now path key present on the object.

I've been reading through the MDN Input page, and I'm pretty sure I'm not doing anything wrong with the markup. The below is the code I have for intercepting the data on the input:

class App extends Component {
  capture(e) {
    e.preventDefault();
    const image = document.querySelector('input').files[0];
    console.log(image);
    // image.path === undefined
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <form onSubmit={e => this.capture(e)}>
          <div>
            <label htmlFor="photo_image">Upload an image</label>
            <input id="photo_image" type="file" accept=".jpg, .jpeg, .png" />
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
   }
}

export default App;

I am stumped. If someone sees where I'm going wrong or if there is a gotcha with react that I don't know about I am all ears!

Update

I should have left this information before, my apologies. The project is bootstrapped with create-react-app. I get this problem in development as well as when serving the build in production.

• create-react-app@1.3.3
• react-scripts@1.0.10
• node@8.2.1
• yarn@0.27.5
• macOS@10.12.6
• chrome@59.0.3071.115