How to send data in api without losing it

Question

Below code i'm adding objects to media array in reactJS

const formData = new FormData()
formData.append('file', file, file.name)
const obj = {
  'id': id,
  'type': 'doc',
  'data': formData,
  url: file
};
setID(id + 1);
setMedia([...media, obj]);

Now i send it to api via axios

function addNew() {
  setProgressing(true)
  axios.post(uri + '/api/add', {
      map_id: props.data.id,
      questions: JSON.stringify(media)
    })
    .then(res => {
      props.updateStep();
    })
    .catch(err => {

    });
}

But on server end i receive object of array like below see data and url is empty

{id: 1, type: "image", data: {{}}, url: {}}

this is request header

SetMedia code which call on each image upload

 function handleUploadChange(e) {
        handleClose();
        const file = e.target.files[0];
        if (!file) {
            return;
        }
        const reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = () => {
            const formData = new FormData()
            formData.append('file', file, file.name)

            const obj = { 'id': id, 'type': 'image', 'data': formData, url: file };
            setID(id+1);
            setMedia([...media, obj]);


        }


        reader.onerror = function () {
            console.log("error on load image");
        };
    }

Your formData and file are empty, which is why it's not being passed through. You'll have to check to see why they're empty. — aynber, Oct 09 '19 at 11:31
they become empty if i do ```JSON.stringify()``` to media array — Mubashir, Oct 09 '19 at 11:33
@EugeneSunic what i want is store image in array of objects then send that array to Api — Mubashir, Oct 09 '19 at 11:36
Are you sure? At the top of your `addNew()` function, try `console.log(formData); console.log(url); console.log(media);` and make sure all of the data looks correct in your browser console. — aynber, Oct 09 '19 at 11:37
yes its look correct before i do ```JSON.stringify``` i check it — Mubashir, Oct 09 '19 at 11:43
I don’t think this can work this way at all. `FormData` creates a complete form data submission set, in case of file uploads including the necessary boundaries. You can not just stuff that whole thing in as the value of a specific POST parameter, that’s not going to work. (And encoding it as JSON does not make much sense either.) — 04FS, Oct 09 '19 at 11:51
if i send without ```JSON.stringify``` i receive data like this ```[object Object],[object Object],[object Object],[object Object],[object Object],``` on server (laravel) side — Mubashir, Oct 09 '19 at 11:55
Maybe this [answer](https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios) could help you :) — Robert Key, Oct 09 '19 at 21:56

score 0 · Accepted Answer · answered Oct 13 '19 at 19:52

0

i find solution for it.

i convert images in base64 and send string in request and on server side convert it again to images.

answered Oct 13 '19 at 19:52

Mubashir

29
1
5

How to send data in api without losing it

1 Answers1