There is a system. The frontend is written in react and the backend in java. On the frontend part, there is an image (base64) and some fields (string) that need to be sent to the server.

'Content-Type': 'multipart/form-data'

I also know that on the backend, the image must have a MultipartFile type

I do not understand what format I need to convert the picture to. Can you please advise me?

    const formData = new FormData();
    formData.append( 'image', store.image); // store.image - base64
    formData.append( 'id-number-value', "id"); 
    formData.append( 'id-number-type', "id_card"); 

    fetch('/path', {
      method: 'POST',
      headers: { 'Content-Type': 'multipart/form-data' },
      body: formData
   } )
   .then((response) => {
      if (response.ok) {
        resolve();
      } else {
        throw new Error(response.message);
      }
   })
   .catch((error) => reject(error));

There is a system. The frontend is written in react and the backend in java. On the frontend part, there is an image (base64) and some fields (string) that need to be sent to the server.

'Content-Type': 'multipart/form-data'

I also know that on the backend, the image must have a MultipartFile type

I do not understand what format I need to convert the picture to. Can you please advise me?

    const formData = new FormData();
    formData.append( 'image', store.image); // store.image - base64
    formData.append( 'id-number-value', "id"); 
    formData.append( 'id-number-type', "id_card"); 

    fetch('/path', {
      method: 'POST',
      headers: { 'Content-Type': 'multipart/form-data' },
      body: formData
   } )
   .then((response) => {
      if (response.ok) {
        resolve();
      } else {
        throw new Error(response.message);
      }
   })
   .catch((error) => reject(error));

• javascript
• reactjs
• fetch
• multipartform-data

• what you've set should work fine. Are you facing errors with that? – Dheeraj Sharma Commented Jun 16, 2022 at 18:47
• @DheerajSharma The error is not particularly clear to me. I get 503. But I've gotten this error before when I've had some errors in making a request. – NOtAgoodProgger Commented Jun 16, 2022 at 18:56
• Have a look at this, and remember if user is selecting a file on some input field in ui then that file will be available on event.target.files[0] google./amp/s/www.geeksforgeeks/… – Dheeraj Sharma Commented Jun 16, 2022 at 18:57
• Also if its 503, then its error on server side, check your backend service logs – Dheeraj Sharma Commented Jun 16, 2022 at 18:58
• No need to base64 encode the image, if its file object and you’ve set it in Form Data, everything else will be handled by fetch/axios – Dheeraj Sharma Commented Jun 16, 2022 at 18:59

1 Answer 1

You can convert the base64 string to a blob first.

const formData = new FormData();
formData.append('id-number-value', "id");
formData.append('id-number-type', "id_card");
fetch(store.image)
    .then(res => res.blob()).then(blob => {
        formData.append('image', blob);
        fetch('/path', {
                method: 'POST',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                body: formData
            })
            .then((response) => {
                if (response.ok) {
                    resolve();
                } else {
                    throw new Error(response.message);
                }
            })
            .catch((error) => reject(error));
    });