title: Angular: how to create Blob from image file?
body: <p>I'm trying to make a preview of some image file that I get from the input, example file looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/94Rlg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/94Rlg.jpg" alt="enter image description here"></a></p>
  
  <p>So I found out that to show preview of file first of all I have to change this file to Blob, I was looking for solution and I found something like this:</p>
  
  <pre><code>  private imageFileToBlob(imageFile) {
      const splitedData = imageFile.image.split(',');
      const mime = splitedData[0].match(/:(.*?);/)[1];
      const bstr = atob(splitedData[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {type: mime});
    }
  </code></pre>
  
  <p>But I don't know how to edit this to make it fit to my type of input file. Can someone help/explain how it should be resolved? </p>
  
  <p>I believe when I get Blob file then I can put it directly into <code>&lt;img [src]='blobHere'&gt;</code>? </p>
  
  <p>Thanks!</p>