Angular ngx-img-cropper：如何获取上传图像的文件名？

Question

I'm using ngx-img-cropper, https://github.com/web-dave/ngx-img-cropper . How do I get the name of the file I am uploading to my app? This is my html code.

<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>

I have variables named data: any, and cropper: ImageCropperComponent, but ImageCropperComponent doesn't have a filename attribute.

If I look at the ngx-img-cropper github page, the src/imageCropperComponent.ts does get the file in the fileChangeListener($event: any) method, but I don't have access to the local file variable inside that method.

Answer 1

Try this in you component, this should not change the component behaviour.

...

@ViewChild('cropper') myCopper: ImageCropperComponent;

ngAfterViewInit() {
  if(this.myCopper) {
    const olfOnFileChange = this.myCopper.fileChangeListener.bind(this.myCopper);
    this.myCopper.fileChangeListener = (event) => {
       if ($event.target.files.length === 0) return;
       // here should be your file name
       let fileName: File = $event.target.files[0].name; 
    olfOnFileChange(event);


  }
}

...

There is also the other function setImage, you might want to change that also depending on what you want to do with the file name. Or you can just get it on your component and use it as it is.

Answer 2

This isn't related to the cropper, that's related to how you handle your file upload. Here is how you can get the name of the file once uploaded. Of course, adapt it to your case by creating a function in your component and Angular-binding your input to this function ( change event)

 displayName = (files) => { const file = files.item(0); console.log('File name is', file.name); } 

 <input type="file" onchange="displayName(this.files)">