CODEWITHSUNDEEP
javascript
RedWitch
RedWitch

Reputation: 153

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

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:

  1. 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

  2. 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).

Upvotes: 1

Views: 4751

Answers (2)

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

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

Upvotes: 0

segFault
segFault

Reputation: 4054

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

Upvotes: 3

Related Questions