how to preview image before upload using ngx-file-drop in angular 6?

Question

I'm using "file-drop" tag to drag and drop image on Angular 6.

 <file-drop headertext="{{adCrud.uploadMediaText}}"
    (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)"
    customstyle="filedrop" customstyle="adMedia"
    (onFileLeave)="fileLeave($event)" >

I got the file[0] from (onFileDrop)="dropped($event)", but I've no idea how to show that image before upload it to the server, thanks in advance :/

   ---------------

Note: I'm trying to implement the below method but could find event.target ? from (onFileDrop)="dropped($event)"

media1change(event) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();

      // tslint:disable-next-line:no-shadowed-variable
      reader.onload = (event: ProgressEvent) => {
        this.adCrud.media1 = (<FileReader>event.target).result;
        // // console.log(this.profile);
        // this.uploadmedia1();
      };

      reader.readAsDataURL(event.target.files[0]);
    }
    this.media1File = event.target.files[0];
    this.uploadmedia1();    }

// I'm trying to implement like a (change)="myFuc($event)" but it fails for (onFileDrop)="dropped($event)" and get error as event.target or event.target.files[0] is null — Hyder Nadeem
– Hyder Nadeem, Commented Sep 15, 2018 at 18:19
I just want to show the image file that gets from (onFileDrop)="dropped($event)" before it uploads to server — Hyder Nadeem
– Hyder Nadeem, Commented Sep 15, 2018 at 18:20

Ionel Lupu · Accepted Answer · 2018-11-01 10:45:00Z

4

The fileEntry is an instance of FileSystemEntry, but if you upload a file and not a folder, the fileEntry is actually a FileSystemFileEntry instance. This means it has the file() method and you can do it like so:

imageDropped($event: UploadEvent) {
        const droppedFile = $event.files[0];
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        const reader = new FileReader();

        fileEntry.file(file => {
            reader.readAsDataURL(file);
            reader.onload = () => {
                this.imageUrl = reader.result;
            };
        });
    }

answered Nov 1, 2018 at 10:45

Ionel Lupu

2,8116 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jorge donayre chirieleison · Accepted Answer · 2019-03-28 20:59:50Z

1

<img [src]="**imageUrlPREVIEW**">

imageUrlPREVIEW;
...
const droppedFile = event.files[0];
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
const reader = new FileREader();
fileEntry.file((file: File) => {
     reader.readASDAtaURL(file);
     reader.onload = () => {
         **this.imageUrlPREVIEW**= reader.result;
     };
});

answered Mar 28, 2019 at 20:59

jorge donayre chirieleison

111 bronze badge

Collectives™ on Stack Overflow

how to preview image before upload using ngx-file-drop in angular 6?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related