files.forEach is not a function

[ranouf]

Hi,

here is the error message:

ImageUploadComponent.html:2 ERROR TypeError: files.forEach is not a function
at Ng2ImgMaxService.push../node_modules/ng2-img-max/dist/src/ng2-img-max.service.js.Ng2ImgMaxService.resize (ng2-img-max.service.js:30)
at Ng2ImgToolsService.push../node_modules/ng2-img-tools/dist/src/ng2-img-tools.service.js.Ng2ImgToolsService.resize (ng2-img-tools.service.js:19)
at ImageUploadComponent.push../src/app/common/image-upload/image-upload.component.ts.ImageUploadComponent.onFileChanged (image-upload.component.ts:28)
at Object.eval [as handleEvent] (ImageUploadComponent.html:4)
at handleEvent (core.js:10258)
at callWithDebugContext (core.js:11351)
at Object.debugHandleEvent [as handleEvent] (core.js:11054)
at dispatchEvent (core.js:7717)
at core.js:8161
at HTMLInputElement. (platform-browser.js:995)

I followed your instructions (2 packages to install + module configuration).

here is my html:

<div layout="row" flex>
  <input style="display: none"
         type="file"
         (change)="onFileChanged($event)"
         [multiple]="allowMultiple"
         [accept]="accept"
         #fileInput>
  <button (click)="fileInput.click()"
          type="button">
    Select File
  </button>
  {{selectedFiles | json}}
</div>

here is the ts file:

export class ImageUploadComponent implements OnInit {

  @Input() allowMultiple: boolean = false;
  @Input() accept: string;

  public selectedFiles: FileList;

  constructor(
    public media: TdMediaService,
    private ng2ImgToolsService: Ng2ImgToolsService
  ) { }

  ngOnInit() {
    this.media.broadcast();
  }

  onFileChanged(event) {
    console.log('onFileChanged', event);
    this.selectedFiles = event.target.files
    this.ng2ImgToolsService.resize(event.target.files, 2000, 1000).subscribe(result => {
      //all good, result is a file
      console.info(result);
    }, error => {
      console.error(error);
      //something went wrong 
      //use result.compressedFile or handle specific error cases individually
    });
  }
}

Is there something I missed?

[ranouf]

So I converted the FileList to File[] and now It works, thanks

let files = <File[]>[];
    for (var i = 0; i < this.selectedFiles.length; i++) {
      files.push(this.selectedFiles[i]);
    }