title: react axios upload file and save to server
body: <p>I'm trying to use FormData to upload an image and save it to a specific folder on my localhost. I can see that the data is there as Console Log shows me the name and other info. I think the problem is with axios.post since console is telling me the upload location on my localhost is not found. Just not sure what to do about it.</p>
  <p>Here is my App.js file:</p>
  <pre><code>import axios from 'axios';
  import React,{Component} from 'react';
   
  class App extends Component {
      state = {
   
        // Initially, no file is selected
        selectedFile: null
      };
      
      // On file select (from the pop up)
      onFileChange = event =&gt; {
      
        // Update the state
        this.setState({ selectedFile: event.target.files[0] });
      
      };
      
      // On file upload (click the upload button)
      onFileUpload = () =&gt; {
      
        // Create an object of formData
        const formData = new FormData();
      
      
        // Update the formData object
        formData.append(
          &quot;myFile&quot;,
          this.state.selectedFile,
          this.state.selectedFile.name
        );
      
        // Details of the uploaded file
        console.log(this.state.selectedFile);
      
        // Request made to the backend api
        // Send formData object
        axios.post('/home3/patriult/public_html/', formData);
      };
      
      
     
      render() {
      
        return (
          &lt;div&gt;
          &lt;form method=&quot;post&quot; encType=&quot;multipart/form-data&quot;&gt;
                  &lt;input type=&quot;file&quot;/&gt;
                  &lt;button onClick={this.onFileUpload}&gt;
                    Upload!
                  &lt;/button&gt;
          &lt;/form&gt;
          &lt;/div&gt;
        );
      }
    }
   
    export default App;
  </code></pre>