HTML
<form enctype="multipart/form-data" method="post" id='photo_details'>
<input type="text" name="f_name">
<input type="file" accept="image/*" name="profile_pic">
<button class="btn">Save</button>
</form>
JAVASCRIPT
when I click submit of the form then given below javascript runs -
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);
}
Suppose I gave f_name as 'Carl' and profile_pic as 'my_passport.png' then
OUTPUT
f_name: Carl
profile_pic: [object File]
Problem in output -
I got the value of f_name
but
I am not getting the value of key profile_pic
instead I am getting [object File]
.
How to get file name using FormData object.
Help here !
console
? If so, don't concatenate to string but use multiple params:console.log(key , value);
. This way you'll have the actual File object getting logged, and you'll be able to navigate it to get itsname
property.