why am i getting this isses, please someone help. FormData { file name → {} }

[olamide-thinker]

i have tried all i can looked everywhere i can and this just persist for no reason i can fathom. please can any one help me.

i want to upload a profile picture to an end point but this just seem to be an obstacle i cant find a get around for

const handleImageChange = (event: React.ChangeEvent) => {
const file = event.target.files?.[0];
console.log("Pics", file);

if (file) {
  let formData = new FormData();
  formData.append("file", file);
  console.log("form content", formData);
}

setOpen(false);

};

[denihs]

It's difficult to understand what's happening from just this snippet of code. Can you provide a reproduction of this problem?

I've been doing some things recently with files and didn't have problems like this.

If you provide a reproduction, it'll be easier to help.

[olamide-thinker]

okay, thank you @StorytellerCZ

first or all, i am using the following dependencies for my ui:

• shadcn
• next
• nextui

i am trying to upload a file to the server and soon as i noticed its now working i decided to console.log what i am getting from the formData and found this :

if (file) {
let formData = new FormData();
formData.append("profile_pic", file , file.name); // Append the file with its name
console.log("Form content:", formData);
}

console log result: FormData { profile_pic → {} }

if (file) {
let formData = new FormData();
formData.append("profile_pic", file.name); // Append the file with its name
console.log("Form content:", formData);
}

console log result: FormData { profile_pic → "profileImage.webp" }

its not uploading the image file. returned {}

so i started trouble shooting and still that issue persist. i don't know what to do. does this mean i can upload life or images for some reasons i can fathom.