title: how upload profile photo and display when click update button?
body: <p>I am creating laravel and react project and I want to create profile page to update data. I created form and fetched data from database. I want to add profile photo upload input with this profile data .When I update data,I received message it was successfully. But I am trouble when I upload image and click update button. Can you help me?</p>
  <p>Profile.js</p>
  <pre><code>import React,{useEffect,useState} from &quot;react&quot;;
  import Header from './../../layouts/frontend/Header';
  import Navbar from './../../layouts/frontend/Navbar';
  import Footer from './../../layouts/frontend/Footer';
  import axios from 'axios';
  import swal from 'sweetalert';
  
  function Profile(props) {
  
      const [loading,setLoading] = useState(true);
      const [userInput,setUserInput] = useState([]);
      const [error,setError] = useState([]);
      const [userImage,setUserImage] = useState([]);
      
      const handleInput = (e) =&gt;{
          e.persist();
          setUserInput({...userInput,[e.target.name]:e.target.value})
      }
  
      const handleImage = (e) =&gt;{
          e.persist();
          setUserImage({uimage:e.target.files[0]})
      }
  
      useEffect(()=&gt;{
          const id = props.match.params.id;
          axios.get(`api/getUser/${id}`).then(res=&gt;{
            
              if(res.data.status === 200){
                  setUserInput(res.data.user);
                  setUserImage(res.data.user);
  
              }
              else if(res.data.status === 404){
                  swal(&quot;Error&quot;,res.data.message,&quot;error&quot;);
                  
              }
              setLoading(false);      
              
          });
  
  
      const updateUser = (e) =&gt;{
          e.preventDefault();
          swal({
              Title:&quot;Confirmation&quot;,
              text: &quot;Confirm to Update Profile Data&quot;,
              buttons: {           
                  confirm: {
                      text: &quot;Confirm&quot;,
                      value: true,
                  },
                  cancel:&quot;Cancel&quot;,
              },
              icon: &quot;info&quot;,
            }).then((value) =&gt; {
              if(value === true){
                  const id = props.match.params.id;
                  const userData = new FormData();   
  
                  userData.append('uimage',userImage.uimage);
                  userData.append('firstname',userInput.firstname);
                  userData.append('lastname',userImage.lastname);
                  userData.append('email',userImage.email);
                  userData.append('phoneno',userImage.phoneno);
                  userData.append('address',userImage.address);
  
                  axios.post(`/api/updateUser/${id}`, userData).then(res=&gt;{
                      if(res.data.status === 200){
                          swal(&quot;Success&quot;,res.data.message,&quot;success&quot;);
                          setError([]);
                          
                      }
                      else if(res.data.status === 404){
                          swal(&quot;Error&quot;,res.data.message,&quot;error&quot;);
                      }
                  });
              }
          });
      }
  
  
  
      if(loading){
          return (            
              &lt;div className=&quot;d-flex justify-content-center&quot;&gt;
                  &lt;div className=&quot;spinner-border text-secondary&quot; role=&quot;status&quot;&gt;
                      &lt;span className=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              );
      }
        
  
  
  
      return ( 
              
          &lt;div&gt;
              &lt;section className=&quot;m-0 p-0&quot;&gt;&lt;Header /&gt;&lt;/section&gt;
              &lt;section className=&quot;m-0 p-0&quot;&gt;&lt;Navbar /&gt;&lt;/section&gt;
              &lt;section className=&quot;m-0 p-0 profileContainer&quot; &gt;
              &lt;h3 className=&quot;text-center p-3 mt-3&quot;&gt;Welcome to Profile&lt;hr /&gt;&lt;/h3&gt;
              &lt;div className=&quot;row m-0 p-0&quot;&gt;
                  &lt;div className=&quot;col-sm-2 mt-5 side&quot;&gt;&lt;/div&gt;
                  &lt;div className=&quot;card-body col-sm-8 shadow-lg &quot;&gt;
                  
                  &lt;form  onSubmit={updateUser} id=&quot;user-form&quot;encType=&quot;multipart/form-data&quot; className=&quot;row&quot;  &gt;
                      &lt;div className=&quot;form-row col-sm-12 row&quot;&gt;
                          &lt;div className=&quot;form-group profile&quot;&gt;
                          
                              &lt;input type=&quot;file&quot;  name=&quot;uimage&quot; onChange={handleImage} className=&quot;form-control&quot; id=&quot;uploadBtn&quot; /&gt; 
                             img src={`http://localhost:8000/${userImage.uimage}`} alt={userImage.uimage} width=&quot;100px&quot; height=&quot;100px&quot; className=&quot;border rounded-circle&quot;/&gt;             
                          &lt;/div&gt;
                          &lt;small className=&quot;text-danger&quot;&gt;{error.uimage}&lt;/small&gt;
                      &lt;/div&gt;
                 
  
                
                  &lt;div className=&quot;form-row row&quot;&gt;
                      &lt;div className=&quot;form-group col-sm-6 row mt-4&quot;&gt;
                          &lt;label htmlFor=&quot;firstname&quot; className=&quot;col-sm-6&quot;&gt;First Name&lt;/label&gt;
                          &lt;input type=&quot;text&quot; name=&quot;firstname&quot; onChange={handleInput} value={userInput.firstname}   className=&quot;col-sm-6 p-2 border border-primary border-1&quot; id=&quot;firstname&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;form-group col-sm-6 row mt-4&quot;&gt;
                          &lt;label htmlFor=&quot;lastname&quot; className=&quot;col-sm-6&quot;&gt;Last Name&lt;/label&gt;
                          &lt;input type=&quot;text&quot; name=&quot;lastname&quot; onChange={handleInput} value={userInput.lastname}   className=&quot;col-sm-6 p-2 border border-primary border-1&quot; id=&quot;lastname&quot;/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-row row&quot;&gt;
                      &lt;div className=&quot;form-group col-sm-12 row mt-4&quot;&gt;
                          &lt;label htmlFor=&quot;email&quot; className=&quot;col-sm-4&quot;&gt;Email&lt;/label&gt;
                          &lt;input type=&quot;email&quot; name=&quot;email&quot; onChange={handleInput} value={userInput.email} className=&quot;col-sm-8 p-2 border border-primary border-1&quot; id=&quot;email&quot;/&gt;
                          &lt;small className=&quot;text-danger&quot;&gt;{error.email}&lt;/small&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-row row&quot;&gt;
                      &lt;div className=&quot;form-group col-sm-12 row mt-4&quot;&gt;
                          &lt;label htmlFor=&quot;phoneno&quot; className=&quot;col-sm-4&quot;&gt;Phone Number&lt;/label&gt;
                          &lt;input type=&quot;tel&quot; name=&quot;phoneno&quot; onChange={handleInput} value={userInput.phoneno}className=&quot;col-sm-8 p-2 border border-primary border-1&quot; id=&quot;phoneno&quot;/&gt;
                          &lt;small className=&quot;text-danger&quot;&gt;{error.phoneno}&lt;/small&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-row row&quot;&gt;
                      &lt;div className=&quot;form-group col-sm-12 row mt-4&quot;&gt;
                          &lt;label htmlFor=&quot;address&quot; className=&quot;col-sm-4&quot;&gt;Address&lt;/label&gt;
                          &lt;input type=&quot;text&quot; name=&quot;address&quot; onChange={handleInput} value={userInput.address} className=&quot;col-sm-8 p-2 border border-primary border-1&quot; id=&quot;address&quot;/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-row mt-4&quot;&gt;&lt;center&gt;&lt;button type=&quot;submit&quot; className=&quot;btn&quot; id=&quot;profileBtn&quot;&gt;Update Profile&lt;/button&gt;&lt;/center&gt;&lt;/div&gt;                     
              &lt;/form&gt;   
              &lt;/div&gt;
              &lt;div className=&quot;col-sm-2 mt-5 side&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;/section&gt;
              &lt;section className=&quot;m-0 p-0 footerContainer&quot;&gt;&lt;Footer /&gt;&lt;/section&gt;
          &lt;/div&gt;
          
       );
  }
  
  export default Profile;
  </code></pre>
  <p>fronendController</p>
  <pre><code>public function userupdate(Request $request, $id)
  {
      $validator = Validator::make($request-&gt;all(),[
          'firstname'=&gt;'required|max:191',
          'lastname'=&gt;'required|max:191',
          'email'=&gt;'required|email|max:191',
          'phoneno'=&gt;'required|max:10',
          'address'=&gt;'required|max:191',
           'uimage'=&gt;'image|mimes:jpeg,png,jpg',
  
      ]);
  
      if($validator-&gt;fails()){
          return response()-&gt;json([
              'status'=&gt;422,
              'errors'=&gt;$validator-&gt;messages(),
          ]);
      }
      else{
          $user = User::find($id);
  
          if($user){
              $user  -&gt; firstname = $request-&gt;input('firstname');
              $user  -&gt; lastname = $request-&gt;input('lastname');
              $user  -&gt; email = $request-&gt;input('email');
              $user  -&gt; phoneno = $request-&gt;input('phoneno');
              $user  -&gt; address = $request-&gt;input('address');
              
  
              if($request -&gt; hasFile('uimage')){
                  $path = $user-&gt;uimage;
  
                  if(File::exists($path)){
                      file::delete();
                  }
  
                  $file = $request-&gt;file('uimage');
                  $extension = $file-&gt;getClientOriginalExtension();
                  $filename = time().'.'.$extension;
                  $file-&gt;move('uploads/users/',$filename);
                  $user -&gt; uimage = 'uploads/users/'.$filename;
              }
  
              $user -&gt; update();
  
              return response()-&gt;json([
                  'status'=&gt;200,
                  'message'=&gt;'Profile Updated Successfully',
              ]);
          }
          else{
              return response()-&gt;json([
                  'status'=&gt;404,
                  'message'=&gt;'You Are Not Registered.Please Sign Up!',
              ]);
          }
  }
  </code></pre>
  <p>I add default value to  image = uploads/users/photo.png</p>
  <p>When I upload image this error was shown.</p>
  <pre><code>[object%20File]:1 GET http://localhost:8000/[object%20File] 404 (Not Found)
  </code></pre>