I am trying to post a file into API my file is shown in the console, but in API payloads it is showing [object file] on uploading.

This is a function for taking file

handleFileChange = (e) => {
const files = e.target.files[0];
this.setState({ document: files });
console.log("Guru4666", this.state.document);
};

The state is then pushed into an object called award value.

SubmitAward() {
var awardValue = {
  title: this.state.awardTitle,
  award_img: this.state.document,
};
console.log("awardValue", awardValue);
this.state.awarddata.push(awardValue);
}

Then the API is called.

instructor_register() {
var titlearr = [];
var awardimgarr= [];

const UserToken = localStorage.getItem("UserToken");
this.state.awarddata.map((Data) => {
  console.log("AwardDataa", Data);
  titlearr.push(Data.title);
  awardimgarr.push(Data.award_img);
});
const formdata = new FormData();
formdata.append("first_name",this.state.firstname)
formdata.append("instructor_award_name",titlearr)
formdata.append("instructor_award_img",awardimgarr)

axios({
  method: "post",
  url: `${API_AUTH_URL}instructor-register`,
  data: formdata,
  headers: { Authorization: "Bearer"   UserToken },
})
  .then((response) => {
    //this.setState({ modalVisibleLoader: false })
    console.log("response.....", response.data);
}

Payload is

instructor_award_img: [object File]

CodePudding user response：

You are attempting to append an array to the formdata object. This isn't a supported data type, so it gets converted to a string.

Supported data types are strings and blobs (files are a type of blob).

Append the file instead.

If you want to append multiple files, do it by looping over the array and appending each file in turn.