Convert image to base64 without server

Question

I'm using the Pinterest Javascript SDK to try and create a pin. The parameters to set the image is 1 of either;

image - Upload the image you want to pin using multipart form data

image_url - The link to the image that you want to Pin, or

image_base64 - The link of a Base64 encoded image

I'm trying to create the Pin from the client side, without going through a server. My form is simply:

<div class="file-upload">
  <input type="file" name="fileToUpload" id="fileToUpload">
</div>

and I read the value of that using

const imageUrl = document.getElementById('fileToUpload').value;

I have tried both the image and image_url parameters to send that value (imageUrl) through, but because the value resolves to a place on my hard drive, it doesn't work (probably expectantly).

So now I have to try and figure out how to use the image_base64 option, which means I need to convert the image to base64 on the users machine.

How could I go about doing that? Or better yet, if someone knows how I can use the image parameter, I think that would be much better

Possible duplicate of [CONVERT Image url to Base64](https://stackoverflow.com/questions/22172604/convert-image-url-to-base64) — Tor, Oct 14 '17 at 22:56

score 0 · Accepted Answer · answered Oct 14 '17 at 22:58

You can use change event attached to <input type="file"> element, FileReader to convert File object at <input type="file"> element .files property to a data URI or base64 portion of data URI within change event handler

<div class="file-upload">
  <input type="file" name="fileToUpload" id="fileToUpload">
</div>
<script>
  const input = document.getElementById("fileToUpload");
  const reader = new FileReader;
  reader.onload = () => {
    const dataURL = reader.result;
    const base64 = reader.result.split(",").pop();
    console.log(dataURL, base64);
  }
  input.onchange = () => {
    reader.abort();
    reader.readAsDataURL(input.files[0]);
  }
</script>

Convert image to base64 without server

1 Answers1