How do you encode a file to base64 then upload as multipart file to backend api using JS?

Question

I am trying to develop a micro-service to receive base64 encoded data. When I tried to send it over 6 MB of data, I am getting below error -

The multi-part request has parameterized data(excluding the uploaded file) that exceeded the limit of maxPostSize set on the associated connector

@RequestMapping(value = "/base64/upload", method = RequestMethod.POST,
                    consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String base64(@RequestParam("file") String file) {

        System.out.println(file);
        return "done";
    }

My App Properties:

#http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#common-application-properties
#search multipart
spring.http.multipart.max-file-size=200MB
spring.http.multipart.max-request-size=100MB

So I read other posts and changed above rest api to below -

@RequestMapping(value = "/base64/uploadFile", method = RequestMethod.POST,
            consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String base64(@RequestParam("file") MultipartFile file) {

        if (file.isEmpty()) {
            return "redirect:uploadStatus";
        }else {
            return "redirect:success";
        }
}

Now how do I upload converted base64 data as a file from front-end application(react app)?

     function getBase64(file) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                console.log(reader.result); // file content is converted to base64

                makeRequest(reader.result,file);
            };
            reader.onerror = function (error) {
                console.log('Error: ', error);
            };
        }

In make request, how to send it as file ? How to create a new file in JS or React ?

      function makeRequest(base64data, actualFile) {

            var data = new FormData();
            // data.append("file", actualFile); // works

            data.append("file", base64data); // doesn't works  ???


            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;

            xhr.addEventListener("readystatechange", function () {
                if (this.readyState === 4) {
                    console.log(this.responseText);
                }
            });

            xhr.open("POST", "http://localhost:8080/base64/uploadFile");
            xhr.send(data);

        }

score 0 · Answer 1 · edited Mar 22 '19 at 03:30

Converting read.result to buffer is the only method I can think of. See the following code:

const buffer = Buffer.from(base64data, 'base64');

after converting read.result to buffer, the multipart post request can be created manually in an easy way:

const formData = new FormData();
formData.append("myFile", buffer, { filename: 'tmp' });

and then instead of send data, send the formData.

I hope this solution solves your problem, the pending part here is to use Buffer and attach to the form to send your file multi-data.

Note: You can change const by var. References:

NodeJS: How to decode base64 encoded string back to binary?

Nodejs post base64 string as form data

How do you encode a file to base64 then upload as multipart file to backend api using JS?

1 Answers1