在 ngx dropzone 中显示现有图像

Question

I am using Angular ngx-dropzone to insert images in Mysql and save them on Server. now I need to do preview/edit mode in angular component in the edit mode, I want to show the existing file in the drop box and display the same when uploading drop zone, any ideas? I have the image as a file and its name of it in the database.

Answer 1

You can use the below code for previewing selected images

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
</ngx-dropzone-image-preview>

If you want to show the label also

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
        <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
    </ngx-dropzone-image-preview>