title: Getting Images out of the filesystemAPI (using Angular2+)
body: <p>I play around with the filesystemAPI. 
  At this moment I can take pictures with <a href="https://www.npmjs.com/package/ngx-webcam" rel="nofollow noreferrer">ngx.webcam</a>, next I take the Base64, convert it into a blob and then save the blob with filesystemAPI:</p>
  
  <pre><code>const imageName = 'imgName';
  const blobImage = this.convert(this.webcamImage.imageAsBase64, imageName);
  
  this.windowRef.nativeWindow.navigator.webkitPersistentStorage.requestQuota(1024 * 1024, (grantedBytes) =&gt; {
        this.windowRef.nativeWindow.webkitRequestFileSystem(this.windowRef.nativeWindow.PERSISTENT, 
         grantedBytes, (fs) =&gt; {
            ((f) =&gt; {
              this.filePath(fs.root, this.path.split('/'), blobImage, f, fs);
            })(blobImage);
        });
  });
  </code></pre>
  
  <pre><code>filePath(rootDirEntry, folders, blobImage, f, fs) {
      // Throw out './' or '/' and move on to prevent something like '/foo/.//bar'.
      if (folders[0] === '.' || folders[0] === '') {
        folders = folders.slice(1);
      }
      rootDirEntry.getDirectory(folders[0], { create: true }, (dirEntry) =&gt; {
        // Recursively add the new subfolder (if we still have another to create).
        if (folders.length) {
          this.filePath(dirEntry, folders.slice(1), blobImage, f, fs);
        }
        if (!folders.length) {
          rootDirEntry.getFile(blobImage.name, { create: true, exclusive: true }, (fileEntry) =&gt; {
            fileEntry.fullPath = '/' + this.path + blobImage.name;
            fileEntry.createWriter((fileWriter) =&gt; {
              fileWriter.write(f); // Note: write() can take a File or Blob object.
            });
          });
        }
      });
  }
  </code></pre>
  
  <pre><code>convert(base64, imageName) {
      const imageBlob = this.dataURItoBlob(base64);
      const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' });
      return imageFile;
  }
  
    dataURItoBlob(dataURI) {
      const byteString = window.atob(dataURI);
      const arrayBuffer = new ArrayBuffer(byteString.length);
      const int8Array = new Uint8Array(arrayBuffer);
      for (let i = 0; i &lt; byteString.length; i++) {
        int8Array[i] = byteString.charCodeAt(i);
      }
      const blob = new Blob([int8Array], { type: 'image/jpeg' });
      return blob;
  }
  </code></pre>
  
  <p>Now if I go through my directory it shows my blob (the name of my blob). </p>
  
  <p>Yet I want to get my blob out of my directory and see the image i´ve token.
  A .txt file I could show with:</p>
  
  <pre><code>text() {
      this.windowRef.nativeWindow.navigator.webkitPersistentStorage.requestQuota(1024 * 1024, 
        (grantedBytes) =&gt; {
          this.windowRef.nativeWindow.webkitRequestFileSystem(this.windowRef.nativeWindow.PERSISTENT, 
           grantedBytes, (fs) =&gt; {
             this.onInitFs(fs);
          });
      });
  }
  
  onInitFs(fs) {
     fs.root.getFile('testFileSystemAPI.txt', {}, (fileEntry) =&gt; {
  
        // Get a File object representing the file,
        // then use FileReader to read its contents.
        fileEntry.file((file) =&gt; {
          const reader = new FileReader();
  
          reader.onloadend = function(e) {
            const txtArea = document.createElement('textarea');
            txtArea.value = this.result as string;
            document.body.appendChild(txtArea);
          };
  
          reader.readAsText(file);
        });
  });
  </code></pre>
  
  <p>but if I try to transfer it to my problem it doesn´t work. My last try:</p>
  
  <pre><code>bilderAnzeigen() {
      this.windowRef.nativeWindow.navigator.webkitPersistentStorage.requestQuota(1024 * 1024, 
        (grantedBytes) =&gt; {
           this.windowRef.nativeWindow.webkitRequestFileSystem(this.windowRef.nativeWindow.PERSISTENT, 
            grantedBytes, (fs) =&gt; {
              this.bA2(fs.root, this.path.split('/'));
        });
      });
  }
  
  bA2(rootDirEntry, folders) {
      const dirReader = rootDirEntry.createReader();
      let entries = [];
  
      if (folders.length - 2 &amp;&amp; folders.length - 3) {
  
        // Call the reader.readEntries() until no more results are returned.
        const readEntries = () =&gt; {
          dirReader.readEntries((results) =&gt; {
            if (!results.length) {
              this.listResults(entries);
            } else {
              entries = entries.concat(this.toArray(results));
              this.bilderArray = this.bilderArray.concat(this.toArray(results));
              readEntries();
              rootDirEntry.getFile(entries[0].name, {}, (fileEntry) =&gt; {
                fileEntry.file((file) =&gt; {
                  const reader = new FileReader();
  
                  this.imgsrc = reader.result;
  
                  reader.onload = (e) =&gt; {
                    this.imgsrc = e.target.result;
                  };
                });
              });
            }
          });
        };
        readEntries(); // Start reading dirs.
  
      }
      // Throw out './' or '/' and move on to prevent something like '/foo/.//bar'.
      if (folders[0] === '.' || folders[0] === '') {
        folders = folders.slice(1);
      }
      rootDirEntry.getDirectory(folders[0], { create: true }, (dirEntry) =&gt; {
        // Recursively add the new subfolder (if we still have another to create).
        if (folders.length) {
          this.bA2(dirEntry, folders.slice(1));
        }
      });
    }
  </code></pre>
  
  <pre><code>toArray(list) {
      return Array.prototype.slice.call(list || [], 0);
    }
  
    listResults(entries) {
      // Document fragments can improve performance since they're only appended
      // to the DOM once. Only one browser reflow occurs.
      const fragment = document.createDocumentFragment();
  
      // this.bilderArray.forEach((bild, i) =&gt; { console.log(bild.name); });
  
      entries.forEach((entry, i) =&gt; {
        // console.log(entry);
        const img = entry.isDirectory ? '&lt;img src="folder-icon.gif"&gt;' :
          '&lt;img src="file-icon.gif"&gt;';
        const li = document.createElement('li');
        li.innerHTML = [img, '&lt;span&gt;', entry.name, '&lt;/span&gt;'].join('');
        fragment.appendChild(li);
  
        // this.getbase64(entry, i);
  
  
      });
  
      document.querySelector('#filelist').appendChild(fragment);
    }
  </code></pre>
  
  <p>My brain got stucked.
  Does anyone know, how i can get my image out?</p>