How can i read data from blob url?

Question

I have to read the data as an array of characters or even better as an base64 string from a blob url, for later processing.

The blobUrl that i have to read for example is blob:https://localhost:44399/a4775972-6cc8-41a3-af64-1180d9941ab0

Actually when following the link, the file is previewed in my browser.

While trying to read the file

var blobUrl = document.getElementById("test").value;

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

I get the error

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

What am i doing wrong here?

readAsDataURL does not actually accept url as input?

How can i fix that?

Artyom Pranovich · Accepted Answer · 2019-11-25T10:58:56.397

5

As spec says, readAsDataURL accept Blob only (which is File inheritor) as a param.

So you need to use original blob file reference (if you have it) or convert URL into file instance.

To convert image URL into the file itself, you can do the following.

async function convertToFile(url){
  let response = await fetch(url);
  let blob = await response.blob();

  return new File([blob], 'put_the_name.jpg', {
    type: 'image/jpeg'
  });
}

// usage
async function main() {
  const url = document.getElementById("test").value; // get file URL somehow
  const file = await convertToFile(url); // usage of function above

  const reader = new FileReader();
  reader.readAsDataURL(file);
  ...
}

Or if you have an input in your markup for uploading files (which is popular use case), you can get file reference directly.

var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();

if (file) {
  reader.readAsDataURL(file);
}

edited Nov 25 '19 at 10:58

answered Nov 25 '19 at 10:32

Artyom Pranovich

6,814
8
41
60

Thank you for your effort. I get response.blob is not a function – OrElse Nov 25 '19 at 10:39
@OrElse so it's likely that you passed incorrect URL format to fetch. See this https://fetch.spec.whatwg.org/#url and provide URL with `blob` prefix. – Artyom Pranovich Nov 25 '19 at 10:50
Btw, if in your case users upload files using tag, you can get file instance directly. Check my answer out again, I updated it. – Artyom Pranovich Nov 25 '19 at 10:52
Made the appropriate changes but i get the same error. parameter 1 is not of type 'Blob'. After debugging the convertToFile method contains blob = Promise {} (I do not use input file for uploading) Actually the blob url is created via javascript from an ajax response – OrElse Nov 25 '19 at 10:52
right, since convertToFile is async function, you need to wait once it's resolved. I'll update my answer shortly with the example added – Artyom Pranovich Nov 25 '19 at 10:55
I updated my answer with usage example of `convertToFile` function. Note that it returns Promise, so you need to resolve it first. You can use native promises https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise instead of async/await (which is just a syntax sugar on top of promises). – Artyom Pranovich Nov 25 '19 at 11:05

How can i read data from blob url?

1 Answers1