Is there a way to display a preview of a selected image before uploading it to the server?
Here is an example in HTML:
<div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)">
<p>drag one or more files to this dropzone</p>
<img src="" id="imgPreview">
</div>
And here is the corresponding TypeScript code:
dropHandler(ev){
console.log(ev);
console.log("file dropped");
event.preventDefault();
if (ev.files && ev.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var abc=<HTMLImageElement>document.getElementById('imgPreview');
abc.src=e.target.result;
};
reader.readAsDataURL(ev.files[0]);
}
However, abc.src=e.target.result seems to return an ArrayBuffer. How can I retrieve the URL of the selected image as a string using FileReader?