 <p>A lot of misconception here. </p> <ul> <li>your variable <code>blob</code> is not a <a href="https://developer.mozilla.org/en/docs/Web/API/Blob" rel="nofollow">Blob</a>, but a string, the url of <code>.file-preview-image</code>.<br> FileReader can't do anything from this string. (Or at least not what you want).</li> <li>in the <code>onload</code> callback of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader" rel="nofollow">FileReader</a>, you are just <strong>checking</strong> if the result is equal to an undefined variable <code>dataURI</code>. That won't do anything. </li> <li>you are trying to <code>console.log</code> the call to <code>readAsDataURL</code> which will be <code>undefined</code> since this method is asynchronous (you have to call <code>console.log</code> in the callback). </li> </ul> <p>But since I guess that what you have is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL" rel="nofollow">object url</a> (<code>blob://</code>), then your solution is either to get the real Blob object and pass it to a <code>FileReader</code>, or to draw this image on a canvas, and then call its <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL" rel="nofollow"><code>toDataURL</code></a> method to get a base64 encoded version.</p> <p>If you can get the blob : </p> <pre class="lang-js prettyprint-override"><code>var dataURI; var reader = new FileReader(); reader.onload = function(){ // here you'll call what to do with the base64 string result dataURI = this.result; console.log(dataURI); }; reader.readAsDataURL(blob); </code></pre> <p>otherwise :</p> <pre class="lang-js prettyprint-override"><code>var dataURI; var img = document.querySelector(".file-preview-image"); var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; canvas.getContext('2d').drawImage(img, 0,0); dataURI = canvas.toDataURL(); </code></pre> <p>But note that for the later, you'll have to wait that your image actually has loaded before being able to draw it on the canvas.<br> Also, by default, it will convert your image to a png version. You can also pass <code>image/jpeg</code>as the first parameter of <code>toDataURL('image/jpeg')</code> if the original image is in JPEG format.<br> If the image is an svg, then there would be an other solution using the <code>&lt;object&gt;</code> element, but except if you really need it, I'll leave it for an other answer.</p>