Convert blob object into base64 javascript

Question

I am trying to convert blob object into base64

var out = doc.getZip().generate({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
}) //Output the document using Data-URI

In the below console. I am getting blob object.

console.log(Blob {size: 1402, type: 'application/vnd.openxmlformats- 
officedocument.wordprocessingml.document'});

I used the blob object to convert into base64

var reader = new FileReader();
reader.readAsDataURL(out); 
reader.onloadend = function() {
var base64data = reader.result;                
console.log(base64data);
return;
}

but I am getting issue while converting into base64

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

I used filesaver.js to allow me to download the file successfully by using saveAs() method

saveAs(out,"Details.docx");

console.log(Blob {size: 1402, type: 'application/vnd.openxmlformats- officedocument.wordprocessingml.document'}); isn't valid javascript, so ... not sure how you can be getting a blob object logged to the console — Jaromanda X
– Jaromanda X, Commented Jul 23, 2022 at 6:25
when I console them out variable. I get this "Blob {size: 1402, type: 'application/vnd.openxmlformats- officedocument.wordprocessingml.document'} " — nawaz uddin
– nawaz uddin, Commented Jul 23, 2022 at 8:26
no, that code you posted is not valid ... are you showing the result of console.log rather than the actual code? — Jaromanda X
– Jaromanda X, Commented Jul 23, 2022 at 8:30
Please show the whole script, not just separated snippets like that . The problem is probably a closure one and out isn't the same thing when you pass it to readAsDataURL than when you logged it. — Kaiido
– Kaiido, Commented Jul 23, 2022 at 9:57

Ahmet Firat Keler · Accepted Answer · 2022-07-23 06:15:14Z

You wanna convert a docx to base64 as I understand

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="upload-button" class="fpd-btn-raised fpd-secondary-bg-color fpd-secondary-text-color">
  <i class="fpd-icon-file-upload"></i><span>Select File</span>
</div>
<input type="file" id="upload-file" class="btn btn-success" style="display:none;" />
<img src="" height="200" />

JS

$('#upload-button').click(function(){
  $('#upload-file').trigger('click');                 
  return false;
});

function convert(e) {
  if(window.FileReader) {
    var file  = e.target.files[0];
    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onloadend = function (e) {
      console.log(reader.result);
    }
  }
}

$(document).ready(function() {
  document.getElementById('upload-file').addEventListener('change', convert, false);
  
});

Pen CodePen

Collectives™ on Stack Overflow

Convert blob object into base64 javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related