title: How to post and get the Image Data to the Aspnetcore Web api server using react-hook-form?
body: <p>I am making a register form using react hook forms and I want to send the data to the ASP.NetCore API Server. For posting the form I am using Axios and react-hook-form. My functionality is working indeed and form is getting submitted to the server. But the problem is it is sending as null for the &quot;ProfilePhoto&quot; field from the form itself. I want to send the image data as the URL so that I could easily get the image back from the API server using the get request and could embed that object returned from the server into the <code>&lt;img src=&quot;&quot;/&gt;</code> field. Could anyone suggest me some workarounds, for posting and effectively getting the posted image back to the user inside of the react component.
  Here is what I tried so far...</p>
  <p>Inside of my axios component as - typescript</p>
  <pre><code>axios.defaults.baseURL='http://localhost:5000/api/';
      const responseBody = (response : AxiosResponse) =&gt; response.data; 
      const Account = {
       register : (values : any, config : {}) =&gt; axios.post(&quot;Visitor/register&quot;, values, 
       config).then(responseBody),
   }
  
  export default Account;
  </code></pre>
  <p>and here's my register.tsx component utilizing the react-hook-form</p>
  <pre><code>export default function Register() {
  //local state for image preview
  const [seeImage, setSeeImage] = useState(&quot;&quot;);
  const defaultImage : string = 'InitialRoles/Thumbnail.png';
  const {register, handleSubmit,
  formState: {errors, isValid, isSubmitting}} = useForm({mode : 'all'});
  const config = {
    headers : {
      &quot;Content-Type&quot; : &quot;multipart/form-data&quot;
    } 
  }
  
  const SubmitForm = async (data : FieldValues) =&gt; {
  const formData = new FormData();
  const imageInput = document.getElementById('imageFile') as HTMLInputElement;
    try{
      formData.append('profilePhoto', imageInput.files?.item(0) as File);
      console.log(formData);
      await agent.Visitor.register(data, config);
    }catch(error : any){
    console.log(error);
    }
  };
  
  const ShowImagePreview = (event : any) =&gt; {
  if(event.target.files[0]){
  setSeeImage(URL.createObjectURL(event.target.files[0]));
  }};
  
  return ( &lt;&gt;
                   &lt;TextField
                    autoComplete=&quot;name&quot;
                    required
                    fullWidth
                    label=&quot;Full Name&quot;
                    autoFocus
                    {...register('name', {
                      required : 'Please enter your full name'
                    })}
                  /&gt;
        
                   &lt;TextField
                    required
                    fullWidth
                    id=&quot;Username&quot;
                    label=&quot;Username&quot;
                    placeholder='Your awesome username'
                    autoComplete=&quot;username&quot;
                    {...register('userName', {
                      required : 'Please enter a cool username'
                    })}
                    error={!!errors.userName}
                  /&gt;
  
                         &lt;Button
                         variant=&quot;contained&quot; 
                         component=&quot;label&quot; 
                         endIcon={&lt;Photo /&gt;}
                         fullWidth = {true}
                         disableElevation = {true}
                         sx={{width : '84%', mx: 2}}&gt;
                          &lt;input hidden multiple type=&quot;file&quot; 
                           accept= &quot;image/*&quot;
                           {...register('profilePhoto', {
                            required : 'Profile photo is required',
                            onChange : ShowImagePreview,
                           })}
                           id =&quot;imageFile&quot;
                          /&gt;
                          {&quot;Upload Image&quot;}
                       &lt;/Button&gt;
  //preview                    
  &lt;img className='profileImage' src={seeImage ? seeImage : 'InitialRoles/Thumbnail.png'} alt ={/*formdata?.profileName*/ &quot;&quot;} width =&quot;165px&quot; height = &quot;163px&quot; /&gt;
  
                 &lt;/&gt;)}
  </code></pre>
  <p>My data is hitting the server and so the database. But the problem is I am sending the null object back to the server into the 'ProfilePhoto' field. How could I send the image object(supported object which an 'IFormFile' could accept).</p>
  <p>I have Asp.Netcore Server with register modal</p>
  <pre><code>public class Visitor : IdentityUser
  {
     [Required, MaxLength(200)]
     public string Name { get; set; } 
  
     public IFormFile ProfilePhoto { get; set; }
  
  }
  </code></pre>
  <p>//userName is coming from IdentityUser for authentication.
  Everything is working fine, how could I get the Image object to be stored into the server as the url so that I could return that url to the client to display it some later time?</p>
  <p>This is the payload that is coming back from the server after a successful registration.</p>
  <pre><code>name: bob
  userName: bob123
  email: bob@test.com
  profilePhoto: [object FileList] //this is sending as 'null'
  password: Pa$$w0rd
  </code></pre>
  <p>All Suggestions are Welcome : )</p>