CODEWITHSUNDEEP
javascript
Nancy Moore
Nancy Moore

Reputation: 2470

How to properly upload files as base64 in javascript

Am trying to upload files as base64 in javascript but it throws error.

TypeError: FileReader.readAsDataURL: Argument 1 does not implement interface Blob.

here is the code

  <input id="file" type="file"/>
  <button id="button">upload</button>


document.getElementById('button').addEventListener('click', function() {
  var files = document.getElementById('file').files;

  var reader = new FileReader();
   reader.readAsDataURL(files);
   reader.onload = function () {
     console.log(reader.result);
    alert('my file: ' +reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   }

});

Upvotes: 1

Views: 3650

Answers (1)

MD. Sani Mia
MD. Sani Mia

Reputation: 282

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

async function Main() {
   const file = document.querySelector('#myfile').files[0];
   console.log(await toBase64(file));
}

Main();

Upvotes: 2

Related Questions