convert local image to base64 data

Question

HTML code

<input id="file-input" accept="image/png, image/jpeg" type="file" name="name" />

after selecting the image , I run this code

var file = $("#file-input").val();
console.log(getBase64(file));

here's the getBase64 function

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

this function fires this error :

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

that's what I tried - if you have workable answer = please share it

Answer 1

Try changing

var file = $("#file-input").val();

to

var file = $("#file-input")[0].files[0];

.val() is not actually returning the blob/file object that you want in this case.