Question 137144 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Axios post file and json in the same request

I am trying to post 3 files and json to an API, I am just a bit confused on how to do it

export const postfunc = createAsyncThunk(
  "dashbaord/postfunc ",
  async (filesSelected, ThunkAPI) => {
    const state = ThunkAPI.getState();
    const formData = new FormData();
    const blob = new Blob([JSON.stringify(state.dashbaord.myjson)], {
      type: "application/json",
    });
    formData.append("json", blob);
    formData.append("File1", filesSelected[0]);
    formData.append("File2", filesSelected[1]);
    formData.append("File3", filesSelected[2]);
    const response = await axios.post(
      "http://localhost:8000/start/",
      formData
    );
    console.log(response.data);
    return response.statusText;
  }
);

I tried to post as blob as you can see in my code, I also tried to submit it as json, no luck
Here is my swagger example

curl -X 'POST' 
  'http://localhost:8000/start/?json=XX_JSON-DATA_XX' 
  -H 'accept: application/json' 
  -H 'Content-Type: multipart/form-data' 
  -F '[email protected]' 
  -F '[email protected]' 
  -F '[email protected];type=application/x-zip-compressed'
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Aks have a nice answer, I went the other way I posted it as blob and I realized that I did not reload my backend and I was trying to get a str while It was supposed to be a file to take that blob


  2. 0

    You can try following code for adding json in url:

    const formData = new FormData();
formData.append("File1", filesSelected[0]);
formData.append("File2", filesSelected[1]);
formData.append("File3", filesSelected[2]);

const response = await axios.post(
  `http://localhost:8000/start/?json=${encodeURIComponent(JSON.stringify(state.dashbaord.myjson))}`,
  formData
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search