CODEWITHSUNDEEP
jqueryajaxblob
Martin
Martin

Reputation: 375

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

I am saving blob in database and I want to retrieve them and show them after ajax request become successful.

function specificreadURL(input) {
    console.log(input)
    var reader = new window.FileReader();
    //reader.readAsArrayBuffer(input);
    reader.readAsDataURL(input);//line with error
    reader.onloadend = function() {
        var base64data = reader.result;
        console.log(base64data);
    };

}

My code is above. The input is from ajax success. I tried to print in console to see what input is like. I am getting this in console.

enter image description here

  1. How can I pass blob into readAsDataURL() like above blob

  2. I want to convert blob to base64 so i can use it src in image.

UPDATE

function specificreadURL(input, type) {
    console.log(input)
    var reader = new window.FileReader();
    reader.readAsDataURL(input);
    reader.onloadend = function() {
        var base64data = reader.result;
        console.log(base64data);
    };
}

for (var j = 0; j < bblobfile.length; j++) {
    var blob = new Blob([bblobfile[j].blob], {
        type: bblobfile[j].type
    });
    specificreadURL(blob, bblobfile[j].type);
}

Tried above code it is giving me the correct type but the image file is not showing. I think the conversion has something do to with it.

Any idea is appreciated.

Upvotes: 1

Views: 24312

Answers (2)

Yin Cognyto
Yin Cognyto

Reputation: 1146

A "little" late, but maybe it helps someone (or even you, if by any chance you didn't figure it out already)... assuming that url is your URL, xhr is your ajax / XMLHttp request, reader is your FileReader and img is your image, you should write something like this:

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function()
  {
  if (xhr.readyState === 4)
    {
    if (((xhr.status === 200) || (xhr.status == 0)) && (xhr.response))
      {
      var reader = new FileReader();
      reader.onloadend = function() {img.src = reader.result;}
      reader.readAsDataURL(xhr.response);
      }
    }
  }
xhr.send(null);

What this code does is basically:

  • request the url using a XMLHttpRequest "GET"
  • set the response type of that request to blob (not json, like you mentioned in the comments)
  • on request completion (and if the response exists, so that you don't get errors like you got in the screenshot you posted!) set up the reader to read the response as a base64 dataURL and assign that base64 URL to the src attribute of your img.

If, as your code seems to do, you get the blobs from an DOM input element of type file, then, if that element is something like:

<input type="file" id="fileinput">

the code becomes:

function readimg()
  {
  var reader = new FileReader();
  reader.onloadend = function() {img.src = reader.result;}
  if (event.target.files[0]) {reader.readAsDataURL(event.target.files[0]);}
  }

document.getElementById('fileinput').onChange = readimg;

That's it.

Upvotes: 3

TYPCN
TYPCN

Reputation: 1

The "input" is a binary string , not a blob.

If you want get a blob from ajax request just do :

xhr.responseType = "blob";

But if you want to be compatible with old browsers ( not support XHR2 ) , you need convert it to Uint8Array first .

var arr = new Uint8Array(input.length);
for (var i = 0; i < input.length; i++){
    arr[i] = input.charCodeAt(i);
}
var blob = new Blob([arr.buffer]);

Upvotes: 0

Related Questions