title: How to get filename using FormData object?
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form enctype="multipart/form-data" method="post" id='photo_details'&gt;
      &lt;input type="text" name="f_name"&gt;
      &lt;input type="file" accept="image/*" name="profile_pic"&gt;
      &lt;button class="btn"&gt;Save&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong><br>
  when I click submit of the form then given below javascript runs -  </p>
  
  <pre><code>let form_details = document.getElementById("photo_details");
  let form_data = new FormData(form_details);
  
  // getting form values as key-value pair
          for ([key, value] of form_data.entries()) {
              console.log(key + ': ' + value);
          }
  </code></pre>
  
  <p>Suppose I gave f_name as 'Carl' and profile_pic as 'my_passport.png' then<br>
  <strong>OUTPUT</strong><br>
  f_name: Carl<br>
  profile_pic: [object File]</p>
  
  <p><strong>Problem in output -</strong><br>
  I got the value of <code>f_name</code> but
  I am not getting the  value of key <code>profile_pic</code> instead I am getting <code>[object File]</code>.  </p>
  
  <p>How to get file name using FormData object.<br>
  <br>
  <strong>Help here !</strong></p>