Pass base64 encoded file from client-side JS to server-side JS to make API call

Question

Here is what I am trying to build:

I have a form with various fields, one of them is image upload. I took the image upload and base64 encode part from here and it works perfectly. This all happens on client-side:

    document.getElementById('button').addEventListener('click', function() {
      var files = document.getElementById('file').files;
      if (files.length > 0) {
        getBase64(files[0]);
      }
    });

    function getBase64(file) {
       var reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = function () {
       };
       reader.onerror = function (error) {
       };
    }

Then, I would like to take the base64 encoded string and include it in JSON to make an api call. The api call needs to happen on server-side. It also includes authentication, and this bit alone is also working fine. The call creates a file in the selected location.

The bit that I am struggling with:

How do I pass the fileEncoded variable from the client-side part of the script to the server-side?

I tried the following:

Passing it as query string to a separate page for making the api call: <form action="apicall.html?fileEncoded" method="post"> but I couldn't make this work
Using localStorage, but that didn't work either: localStorage.setItem("fileEncoded", fileEncoded);

I would like to understand what I am missing here and I would appreciate an answer that would explain the concept, on top of providing a code snippet.

I would prefer to do it on two separate pages (1st with form and base64 encode, 2nd with the server-side api call).

score 2 · Accepted Answer · answered Feb 23 '20 at 13:54

You likely need to send a request to your server via POST request, with the encoded file data as the body in that request.

Then server-side, you will have to handle that POST request.

For example:

function getBase64(file) {
  var reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = function () {
    console.log(reader.result);
    var fileEncoded = reader.result;
    fetch("/upload/file", {
      method: "POST", 
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        data: fileEncoded,
        // Additional fields  here...
      })
    })
    .then(function(res) {
      console.log("Success!", res);
    })
    .catch(function(err) {
      console.log("Error!", err);
    });
  };

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

JS Bin

Thank you, and what if I want the page to be redirected to the second html page which holds the server-side script, so that I can display the result of the call and additional info in the browser for the user to see? I tried `redirect: “follow”` but it did not redirect to my second page — RedWitch, Feb 23 '20 at 14:54
You could handle displaying a message to the user from within your`.then()` callback. If you want to redirect the user instead, try something like [window.location.href](https://stackoverflow.com/a/7077808/1514049) — segFault, Feb 23 '20 at 19:03

score 0 · Answer 2 · answered Feb 23 '20 at 13:57

In your code you are using readAsDataURL which converts the file into a data URL which is typically used to display a selected image file. It doesn't access the server at all. What you want to do is create an AJAX request to the server.

See related question: How to use FormData for ajax file upload

Pass base64 encoded file from client-side JS to server-side JS to make API call

2 Answers2