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

reactjs formData upload file

hi there
I have a problem with react js,
I have an upload file and want to send
this file by form data into backend , this is my code :

      for (let i = 0; i < selectedFiles.length; i++) {
          const rand = uuidv4()
          const form = new FormData();
          form.append('TicketId', inFuncResult);
          form.append('Title', title);
          form.append('Description', body);
          form.append('LatinCode', 'ldj3556');
          form.append('file',  JSON.stringify(selectedFiles[i]));
          // form.append("file", new Blob([selectedFiles[i]], {type: 'application/octet-stream'}));
          form.append('fileType', 'Warranty');
          form.append('Id', rand);
          const myForm = JSON.stringify(Object.fromEntries(form));
          await TicketFileAPI.post(
            "/TicketFile",
            form,
          );
        }

But when I submit this data, an error occurs because the file form data is sent as an empty object ‘{}’. This is my submit model:

{"TicketId":"2ca3c87d-65d4-ed11-afe9-e4fd45c4a1fc","Title":"wqe","Description":"sadasd","LatinCode":"ldj3556","file":{},"fileType":"Warranty","Id":"13602769-5dab-4033-81a2-cc7b20f13459"}

can u tell me what is the my problem?

Tags:

2

Answers


  1. 0

    Try removing JSON.stringify from the file append. Like this:

    form.append('file',  selectedFiles[i]);
    Login or Signup to reply.
  2. 0

    Try removing the line const myForm = JSON.stringify(Object.fromEntries(form)); and send the form object directly in your axios request as follows:

    await TicketFileAPI.post(
    "/TicketFile",
    form
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search