title: Retrieve png file and render it for preview
body: <p>So I have an img tag in my template that is bound to a state &quot;imageBuffer&quot;</p>
  <pre><code> &lt;img v-bind:src=&quot;imageBuffer&quot; alt=&quot;&quot; /&gt;
  </code></pre>
  <p>and I have the following logic, the page has two file inputs and I used this one function to  handle all file picking:</p>
  <pre><code>onFilePicked(event, type) {
        const extension = this.getExtension(event.target.files[0].name);
        let isValid = false;
  
        if (type === 'pdf' &amp;&amp; extension === 'pdf') {
          isValid = true;
        }
  
        if (type === 'image' &amp;&amp; (extension === 'jpg' || extension === 'png')) {
          isValid = true;
        }
  
        if (isValid) {
          const fileReader = new FileReader();
          if (type === 'pdf') {
            const files = event.target.files;
            let filename = files[0].name;
            fileReader.addEventListener('load', () =&gt; {
          });
  
            this.pdf = files[0];
  
  
          } else if (extension === 'png' || extension === 'jpg') {
  
            fileReader.addEventListener('load', () =&gt; {
              this.imageBuffer = fileReader.readAsDataURL(event.target.files[0]);
            });
  
          }
        } else {
          alert('Invalid file type');
        }
      },
  </code></pre>
  <p>The PDF chooser is working fine however when I console.log the &quot;imagebuffer&quot; it doesn't seem to work and it's not rendering the image preview. Which function should I use from FileReader to retrieve the image buffer and convert it into a png?</p>