title: How to extract the base64 from an image in Angular NGX Dropzone
body: <p>Hey guys I am using NGX Dropzone and I notice when I drag an image into the viewer it is in base64, but when I try to read the <code>console.log(event.addedFiles);</code> I have no information being passed to me with the base64 value. Here's an example of what I get back</p>
  <pre><code>[File]
    0: File
       lastModified: 1625149167659
       lastModifiedDate: Thu Jul 01 2021 10:19:27 GMT-0400 (Eastern Daylight Time) {}
       name: &quot;210534431_764639924207804_238792847075232344_n.jpeg&quot;
       size: 101133
       type: &quot;image/jpeg&quot;
       webkitRelativePath: &quot;&quot;
       __proto__: File
       length: 1
       __proto__: Array(0)
  </code></pre>
  <p>I have another piece of code which I have been using that transforms a URL into a base64 string. But thats useless to me since the URL can also be shared and opened by anyone from anywhere. However my local image in my computer is only available to me, unless I transform it into base64 which is a string I can save in a database.</p>
  <p>This is the script</p>
  <pre><code>imageToShow: any;
  
  onURLinserted() {
    this.getImage(this.thumb.name).subscribe(data =&gt; {
      this.createImageFromBlob(data);     
    }, error =&gt; {
      console.log(&quot;Error occured&quot;,error);
    });
  
    console.log(&quot;Data: &quot;, this.thumb.name);
  }
  
  getImage(imageUrl: string): Observable&lt;Blob&gt; {
    return this.http
      .get&lt;Blob&gt;(imageUrl, { observe: 'body', responseType: 'blob' as 'json' })
  }
  
  createImageFromBlob(image: Blob) {
    let reader = new FileReader(); //you need file reader for read blob data to base64 image data.
    reader.addEventListener(&quot;load&quot;, () =&gt; {
        this.imageToShow = reader.result; // here is the result you got from reader which I use to view the image
        this.selectedRowData.photo = reader.result; // this is my ngModel read by my HTML input fields
    }, false);
  
    if (image) {
      reader.readAsDataURL(image);
    }
  }
  
  //In my HTML code
  &lt;img [src]=&quot;imageToShow&quot; alt=&quot;&quot;&gt; 
  </code></pre>
  <p>All I am really trying to do is extract the base64 information from the image dragged in there into imageToShow either by using this code if it helps or something similar OR maybe the cdk drag an drop already has a prop that I dont know about</p>
  <p>How do I know that the base64 is even available? When I drag an image in it, and I inspect it in the dev tool I can see the src=&quot;data:image/jpeg;base64,random stuff...&quot;</p>
  <p>Wish I could put some test code here but I will need the dropzone library for it</p>