How I insert a image data in a input element to generate a FIleList

Question

I developed an image-cropper, which generates a base64 and after that creates an image file. But I have no idea how to insert image data into an entry to generate a FileList. Can someone help me?

Answer 1

If i understand what you need is an input file to pass the event to image-cropper.

PS : the event have the files data.

Example : HTML :

<input id="input-files" type="file" (change)="onImageFileChanged($event)" accept="image/*" />

<image-cropper *ngIf="imageChangedEvent" [imageChangedEvent]="imageChangedEvent"></image-cropper>

TS:

imageChangedEvent: any = '';

onImageFileChanged(event: any) {
   this.imageChangedEvent = event;
}

Now inside this.imageChangedEvent a list of images that you have selected.

If you want to put back your files to input file then try this :

const data = new ClipboardEvent('').clipboardData || new DataTransfer();
data.items.add(new File(['foo'], 'image.png'));
  // replace new File(['foo'], 'image.png') with your file
document.getElementById("input-files").files = data.files;

Source : stackoverflow-set-file-objects