1

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));
Federico klez Culloca
  • 26,308
  • 17
  • 56
  • 95
NOtAgoodProgger
  • 11
  • 1
  • 3
  • what you've set should work fine. Are you facing errors with that? – Dheeraj Sharma Jun 16 '22 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 Jun 16 '22 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] https://www.google.com/amp/s/www.geeksforgeeks.org/file-uploading-in-react-js/amp/ – Dheeraj Sharma Jun 16 '22 at 18:57
  • Also if its 503, then its error on server side, check your backend service logs – Dheeraj Sharma Jun 16 '22 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 Jun 16 '22 at 18:59
  • Given that your backend expects it as multipart and not base64 encoded – Dheeraj Sharma Jun 16 '22 at 19:01
  • Yes, I understand that, that's exactly the point, I don't understand the correct approach to converting from base64 to the type I need. I didn't convert the file to base64, it's the way it was originally. – NOtAgoodProgger Jun 16 '22 at 19:04
  • What type do you need? Basically from ui the request should go as multipart formdata and then on backend it will be received as multipart form data, on backend you can simply write the variable in the request object to a file and you’ll get your file. As it will be present in the request in the backend in binary. – Dheeraj Sharma Jun 16 '22 at 19:09
  • The problem is, I don't have access to the backend and I can't see any logs. I only know that on the backend this image already has MultipartFile type (I guess it's something from Spring) I also know that the request body type is multipart/form-data – NOtAgoodProgger Jun 16 '22 at 19:16
  • I don't have an understanding of what MultipartFile type is and what do I need to do to convert my picture to it – NOtAgoodProgger Jun 16 '22 at 19:19
  • If you’re sure its multipart then this is the way to go. https://www.google.com/amp/s/www.geeksforgeeks.org/file-uploading-in-react-js/amp/ Just pass the file instance from your event to form data and set other fields and send it! One other thing you can try in case you’re facing errors is to change the key image to file. formData.append(‘file’, store.image) and see if that helps – Dheeraj Sharma Jun 16 '22 at 19:21
  • So what comes out. I don't have the picture upload functionality, but whatever. Lets say I uploaded a picture and got a base64 string, which I just put in formdata and make a request? – NOtAgoodProgger Jun 16 '22 at 19:27
  • What comes out as in? You need to be a bit clear with what exactly is happening in your system to get some help. You wanna send the request from UI to backend using fetch, that is the way to go, otherwise from where else you get an image on the UI if user isn’t uploading it. If you’re sending it from node to backend then still you’ll have the file object, just set it in form data and send the request. If your use case is out of these two then please help us understand what exactly you’re trying to achieve. I’m all ears! – Dheeraj Sharma Jun 16 '22 at 19:33
  • I take a photo. I use react-webcam (https://www.npmjs.com/package/react-webcam) and take a photo. Taking photo method returns a base64 encoded string of the current webcam image. I take a photo, then I take that photo and send it to the backend – NOtAgoodProgger Jun 16 '22 at 19:40
  • https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158 – Dheeraj Sharma Jun 16 '22 at 19:57
  • Read that thread, So you can convert your base 64 string to blob, set it to form data and Everyone’s Happy!! ;) – Dheeraj Sharma Jun 16 '22 at 19:58
  • Basically this function does all the magic https://stackoverflow.com/a/5100158 – Dheeraj Sharma Jun 16 '22 at 19:59
  • Hmm, the error is still there. Eh, looks like I'll interrogate the backend developers tomorrow. 24 hours to release... – NOtAgoodProgger Jun 16 '22 at 20:14
  • lol. All the best for a Friday release my friend. May you have a wonderful weekend xD – Dheeraj Sharma Jun 16 '22 at 20:15
  • Thank you! I hope I don't have to do any emergency fixes this weekend, heh – NOtAgoodProgger Jun 16 '22 at 20:18
  • In case you need anything, We’re here :D xD – Dheeraj Sharma Jun 16 '22 at 20:21
  • Were you able to resolve it? do share you're findings. – Dheeraj Sharma Jun 17 '22 at 15:54

1 Answers1

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));
    });
Unmitigated
  • 76,500
  • 11
  • 62
  • 80