Custom preview needs clarification - How on earth should we provide a view/edit option for loading only fileUrls? -

[exitlol]

I have an issue with the custom preview.

On our project we store the uploaded images as string array for the img links.

How on earth can I provide a view/edit option for editing the entity we've saved the imgs for?

I've done the custom preview from the wiki. I've basically copied the whole.

<div class="custom-dropzone"
     #drop
     ngx-dropzone
     [accept]="IMAGE_TYPE_LIMIT"
     (change)="onSelect($event)">
  <ngx-dropzone-label>
    <div>
      <h2>{{ 'dropZone.content' | translate }}</h2>
    </div>
  </ngx-dropzone-label>
  <ng-container *ngIf="dropZoneService.fileUrls.length > 0; else uploadPreview">
    <ng-container *ngFor="let url of fileUrls">
      <app-custom-dropzone-preview [imgUrl]="url"
                                   ngProjectAs="ngx-dropzone-preview"></app-custom-dropzone-preview>
    </ng-container>
  </ng-container>
  <ng-template #uploadPreview>
    <ngx-dropzone-image-preview class="image-preview"
                                ngProjectAs="ngx-dropzone-preview"
                                *ngFor="let file of dropZoneService.files"
                                [file]="file"
                                [expandable]="true"
                                [removable]="true"
                                (removed)="onRemove(file)">
    </ngx-dropzone-image-preview>
  </ng-template>
</div>

When I open up for edit the customPreview is showing without the images. The wiki lacks explanation of how to do this kind of preview. And i've had no luck finding answer to my issue in the previously discussed issues about this topic.

As Far as my understanding goes. The preview only works if there's a file. But how can we get the file as a File just from the url?

[technbuzz]

Apparently the file preview requires File. It renders the file by extracting its datauri and use it as a source of the img.

In my understanding, this package handles the selection of files and preview of file before it's uploaded.

[peterfreeman]

Hey guys,

to preview an image file from a URL, you would have to implement something like this when fetching the files:

async function createFilePreview(){
  const response = await fetch('http://.../test.jpg');
  const imgBlob = await response.blob();

  const file = new File([imgBlob], "test.jpg",{ type: 'image/jpeg' });
}

Hope this helps.

[richardR59]

Hey guys,

to preview an image file from a URL, you would have to implement something like this when fetching the files:

async function createFilePreview(){
  const response = await fetch('http://.../test.jpg');
  const imgBlob = await response.blob();

  const file = new File([imgBlob], "test.jpg",{ type: 'image/jpeg' });
}

Hope this helps.

It works, but we need to use proxy to avoid CORS permission.