title: I have issue with React forms when I try to post form with file type input
body: <p>*Hello everyone,
  When I try to post form with file type input, my request stuck pending and not add to my database. Can someone help ?</p>
  <p>*</p>
  <p><em>this is my upload method.</em></p>
  <pre><code>const addBook =  ( name, author, category, about, pdf, image) =&gt; {
          const book = { 
               name,
               author, 
               category, 
               about, 
               pdf, 
               image
          };
          axios.post('http://localhost:3004/book', book)
               .then(response =&gt; {  
                   books.push(book);
                   setBooks(books);  
                  });
      }   
  </code></pre>
  <p><em>this is my Addbook React function component</em></p>
  <pre><code>
     const { addBook } = useContext(BookContext);
  
  
     const [newBook, setNewBook] = useState({
         name:&quot;&quot; , author:&quot;&quot;, category:&quot;&quot;, about:&quot;&quot;, pdf:&quot;&quot;, image:&quot;&quot;
     })
  
     const {name, author, category, about, pdf, image} = newBook;
  
     const onInputChange = (e) =&gt; {
         setNewBook({...newBook, [e.target.name]: e.target.value })
     }
  
     const handleSubmit = (e) =&gt; {
          e.preventDefault();
          addBook(name, author, category, about, pdf, image);
     }
      return ( 
          &lt;Form onSubmit={handleSubmit}&gt;
         
         &lt;Form.Group&gt;
                  &lt;Form.Control
                      type =&quot;Text&quot;
                      placeholder=&quot;Name *&quot;
                      name=&quot;name&quot;
                      value={name}
                      onChange={e =&gt; onInputChange(e)}
                      required
                  /&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group&gt;
                  &lt;Form.Control
                      type =&quot;Text&quot;
                      placeholder=&quot;author *&quot;
                      name=&quot;author&quot;
                      value={author}
                      onChange={e =&gt; onInputChange(e)}
                      required
                  /&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group&gt;
                  &lt;Form.Control
                      as =&quot;textarea&quot;
                      placeholder=&quot;category *&quot;
                      name=&quot;category&quot;
                      value={category}
                      onChange={e =&gt; onInputChange(e)}
                      rows={3}
                  /&gt;
              &lt;/Form.Group&gt;
              
              &lt;Form.Group&gt;
                  &lt;Form.Control
                      type =&quot;Text&quot;
                      placeholder=&quot;about *&quot;
                      name=&quot;about&quot;
                      value={about}
                      onChange={e =&gt; onInputChange(e)}
                  /&gt;
              &lt;/Form.Group&gt;         
  
              &lt;Form.Group&gt;
                  &lt;Form.Control
                      type =&quot;text&quot;
                      placeholder=&quot;image *&quot;
                      name=&quot;image&quot;
                      value={image}
                      onChange={e =&gt; onInputChange(e)}
                  /&gt;
              &lt;/Form.Group&gt;
             
              &lt;Form.Group&gt;                        
              &lt;Form.Control
                      type =&quot;file&quot;
                      placeholder=&quot;pdf&quot;
                      name=&quot;pdf&quot;
                      value={pdf}
                      onChange={e =&gt; onInputChange(e)}
                  /&gt;
                                
              &lt;/Form.Group&gt;
  
             
  
              &lt;Button variant=&quot;success&quot; type=&quot;submit&quot; &gt;
                   Add new Book
              &lt;/Button&gt;
  
          &lt;/Form&gt;
              
          )
  }
  
  export default AddBook;
  </code></pre>
  <p>Can you please answer my problem because, I dont have time so much for this project deadline.
  thank you for your helping.</p>
  <ul>
  <li>Have nice coding everyone... *</li>
  </ul>