send file and data to server with Axios

Question

I am using ReactJs and wanna send data to Laravel API with Axios.

I try

export const send = (data, File) => {
  const formData = new FormData();
  formData.append('media', File);
  try {
    PostRequest.post('/post', { formData, data })
      .then(r => console.log(r.data))
      .catch(e => console.log(e));
  } catch (error) {
    console.log(error);
  }
};

and I call send like this :

let data = {
  mobile: mobile,
  email: emailAddress,
  userName: userName,
  password: password,
  firstName: firstName,
  lastName: lastName,
  website: website,
  bio: bio,
  date: selectedDay,
  code: code,
};
console.log(profile);
console.log(data);
send(data, profile);

the log

but form data is null in the response

I set the header like this :

headers: {
  "Content-Type": "multipart/form-data",
  "Accept":"application/json"
}

also I try

const formData = new FormData();
formData.append('media', profile);
let data = {
  mobile: mobile,
  email: emailAddress,
  userName: userName,
  password: password,
  firstName: firstName,
  lastName: lastName,
  website: website,
  bio: bio,
  date: selectedDay,
  code: code,
  media: formData,
};
send(data);

but the media is null

In your first attempt, what is the type of the `File` variable? .append() is expecting instanceof Blob/File, and I can't tell if you're using the class called https://developer.mozilla.org/en-US/docs/Web/API/File/File or forgot to call it or if it already is it. — Jonathan Rosa, Oct 23 '21 at 02:48
@JonathanRosa the File set by input file like : const onChangeHandler = (e) => { setProfile(e.target.files[0]);} — None, Oct 23 '21 at 04:55

score 1 · Answer 1 · answered Oct 23 '21 at 08:29

1

you can have an uploader like this , which will work with ;)

 const Uploader = ({ url, updateData }) => {
function handleUpload(e) {
if (e.target.files[0]) {
  console.log(e.target.files);
  const formData = new FormData();
  formData.append("config", e.target.files[0], e.target.files[0].name);
  console.log(formData);
  axios.post(url, formData).then(res => {
    updateData(res);
  });
}
}
return (
<label>
  <div className={styles.uploaderBtn}>
    <input
      type="file"
      style={{ display: "none" }}
      onChange={e => {
        handleUpload(e);
      }}></input>
    <img src={Upload} alt="" />
  </div>
</label>
);
};

answered Oct 23 '21 at 08:29

parichehr.mohebbi

486
4
15

I wanna send file and other data in my code if I send just file without data it is ok but when I add other data like username and ... do not work – None Oct 23 '21 at 09:07
you must append all your data parameters to your formdata either , and then in the backend read it from formdata – parichehr.mohebbi Oct 23 '21 at 10:57

score 1 · Accepted Answer · answered Oct 23 '21 at 11:53

The problem is not with your implementation at all. You can't log the formData in the console and expect to see its entities as the other objects.

So, the empty formData on the console is proper behavior. if you really want to inspect your formData, take a look at this post.

thus, your send method is working properly and sending the correct data to the server.

Optional

On the server, you need to get the formData and parse it, so it must be implemented on the server-side. since you need to get the body request in formData, you could append all your data in the whitin a formData and send a single formData, but its depened on the backend implementation, if you can change the server-side, I engourage you to appnend all your data in the formData and then send it.

send file and data to server with Axios

2 Answers2

Optional