Angular: Type ArrayBuffer is not assignable to type string

Question

I'm trying to show selected image's preview before uploading it to server..

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>

ts

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]);
  }

but abc.src=e.target.result seems to return an ArrayBuffer.How do i get url of the selected image as string using FileReader?

I think due to browser restriction. You cant get URL. U can only get data. Else if u use image than u get fake URL. — xdeepakv, Feb 15 '20 at 10:14
Use string concat: check here https://stackoverflow.com/questions/11089732/display-image-from-blob-using-javascript-and-websockets — xdeepakv, Feb 15 '20 at 10:18
With your code you should definitely have a string there. There must be something you miss-copied. A note though, don't even use a FileReader in this case. Create a blobURI `dropHandler(ev) { if(ev.files && ev.files[0]) { document.getElementById('imgPreview').src = URL.createObjectURL(ev.files[0]);} }` — Kaiido, Feb 15 '20 at 10:38

score 0 · Answer 1 · answered Feb 15 '20 at 10:22

0

I think you've got the principles correct. It works when I run a simpler version of your code with a file upload.

https://stackblitz.com/edit/angular-fxa49p

<input type="file" #file (change)="onUpload(file.files[0])" />
<img *ngIf="src" [attr.src]="src" id="imgPreview">

  onUpload(file): void {
    if (!file) {
      return;      
    }

    const reader = new FileReader();
    reader.onload = e => {     
      this.src = <string>e.target.result;
    };
    reader.readAsDataURL(file);
  }

I had to cast the e.target.result to a string to keep the linter happy, but the javascript is fine.

NB the drop functionality wasn't working for me in Stackblitz, hence the file upload. It should be the same in principle as a file drop though as you're ultimately dealing with a File object.

answered Feb 15 '20 at 10:22

Kurt Hamilton

12,490
1
24
40

Actually when using drag and drop an Http call to server is made instead of using the fake path from browser..Its working fine with simple file upload. – Arjun Feb 15 '20 at 10:42
What http server? This is all client side. You can use the code from the MDN docs to get the file object from a drop event. https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop – Kurt Hamilton Feb 15 '20 at 10:50
when I use drag and drop image src gets changed to http://localhost:4200/undefined instead of the fake path,with simple image upload its working fine . – Arjun Feb 15 '20 at 10:56
reader.readAsDataURL(file) doesn't return an http URL - it returns a base64 data url. You should bind this data url to your img src directly `` where `imgData` (or whatever you call it) is the base64 URL – Kurt Hamilton Feb 15 '20 at 11:04

Angular: Type ArrayBuffer is not assignable to type string

1 Answers1