CODEWITHSUNDEEP
typescriptangular7dropzone.js
Mostafa Bagheri
Mostafa Bagheri

Reputation: 413

How to display existing files on server in ngx-dropzone-wrapper on Angular 7

I work on angular 7 project and i use ngx-dropzone-wrapper module for upload image to server web api i can upload image with out problem but i will show exist uploaded image in update mode .

My Html Side Code 

<dropzone class="dropzone-container" [config]="config" fxLayout="row" fxLayoutAlign="start strech"
            #nationalDropZone (success)="onUploadSuccess($event)" fxFlex="auto" (init)="nationalDropZoneInit($event)"
            [message]="'Please Add '"></dropzone>

  @ViewChild('nationalDropZone') componentRef?: DropzoneComponent;
  dropzone: any;

And Here Initialize dropzone

  nationalDropZoneInit(arg: any): void {
  this.dropzone = this.componentRef.directiveRef.dropzone();
  }

Here I Read User information include user profile image in string url template my return model from server have profileImageUrl property which when enter on browser url can see image. now i will add exist image with preview thumbnail on dropzone

this.accountService.getResellerProfile().subscribe((res: ResellerInfoModel) => {
//Add res.profileImageUrl  to dropzone
//I do not know how
 });

Upvotes: 2

Views: 7523

Answers (1)

ruwan800
ruwan800

Reputation: 1885

Hope this helps.

const dropzone = this.componentRef.directiveRef.dropzone();

const mockFile = { name: "some name", size: "some size" };

dropzone.emit( "addedfile", mockFile );
dropzone.emit( "thumbnail", mockFile, res.profileImageUrl );
dropzone.emit( "complete", mockFile);

I got some help from this answer.

Upvotes: 1

Related Questions