2

Is it possible to convert a Blob to Uint8Array without using a callback and just using JavaScript?

How to return the uint8array for the calling variable uint8data?

let str='content';

str2blob=(str,type='text/plain')=>new Blob([str],{type:type});

let blob=str2blob(str);

function blob2uint(blob){
    new Response(blob).arrayBuffer().then(buffer=>{
        uint=[...new Uint8Array(buffer)];
        console.log("Uint8Array",uint);
        return uint;
    });
}

let uint8data=blob2uint(blob);
console.log(uint8data); //Show Uint8Array
Spiderpoison
  • 95
  • 2
  • 9
  • Do you have a problem with the asynchrony (and need to access it synchronously), or do you just not like the callback function (in which case `async`/`await` would be a solution)? – Bergi Sep 01 '21 at 13:48
  • Precisely, how to make the uint8data variable wait for the return of the blob2uint function? – Spiderpoison Sep 01 '21 at 14:18
  • Use `async`/`await` to do that. The entire function that uses `uint8data` will become asynchronous, there's no way to avoid that. – Bergi Sep 01 '21 at 17:24
  • I think I didn't express myself correctly. I will try again. What I need is for the blob2uint function to return the data to the uint8data variable in the same way that the str variable receives the data from the srt2blob function, without using a callback function. Could you give me an example? The blob variable was created just to illustrate my example. – Spiderpoison Sep 01 '21 at 18:51
  • `async`/`await` does not use any callback functions. But no, you cannot immediately return the data from the function, best you can do is to return a promise for it. It's asynchronous, deal with it - or don't use blobs. See also https://stackoverflow.com/q/17068610/1048572 – Bergi Sep 01 '21 at 20:49
  • Thank you very much, I had no choice but to preload the files. The link to the final result of the project, it creates pkzip files with javascript. https://github.com/pwasystem/zip/ – Spiderpoison Sep 14 '21 at 14:35

1 Answers1

2

Assuming this is somewhere inside a function, you can make it async and use await to wait for the Promise to complete once you return it from the blob2uint function:

async function myBlobToUIntDemo() {
  let str='content';

  str2blob=(str,type='text/plain')=>new Blob([str],{type:type});

  let blob=str2blob(str);  

  function blob2uint(blob){
      return new Response(blob).arrayBuffer().then(buffer=>{
          uint=[...new Uint8Array(buffer)];
          console.log("Uint8Array",uint);
          return uint;
      });
  }
  
  let uint8data = await blob2uint(blob);
  console.log(uint8data); //Show Uint8Array
}

Let's spike this up with some more information:

Why do I need a callback in the first place?

Because you are doing asynchronous work by pulling the arrayBuffer from a response. JavaScript (as far as I know) only runs in a single thread. Waiting for a website in your code without using a callback would halt all other JavaScript execution on your page if you didn't put it in the background somehow; that's what callbacks and Promises do for you (from the outside at least).

Promises?

Functions doing asynchronous work typically return a Promise object, that promises to provide you with the value once the work completes (by calling the function passed in the then callback with it) or an error in case something goes wrong (by calling the catch callback with it).

async / await

async / await was introduced to make working with Promises a bit nicer and readable, reducing the need for callbacks a lot. You can read more about that in this MDN article.

The code block above only contains the bare minimum changes to get things working. Let's simplify that a bit more!

async function myBlobToUIntDemo() {
  let str = 'content';
  let str2blob = (str, type = 'text/plain') => new Blob([str], { type: type });
  let blob = str2blob(str);

  const buffer = await new Response(blob).arrayBuffer();
  const uint = [...new Uint8Array(buffer)];
  
  console.log(uint);
}

Note that this returns a Promise as well (this automatically happens if you mark your function as async) so make sure to remember that if you were to use this function anywhere in your code.

geisterfurz007
  • 5,292
  • 5
  • 33
  • 54