cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

[bug report] Cannot read property 'name' of undefined #151

Closed wnabil closed 7 years ago

wnabil commented 7 years ago

Hello, Thank you for this awesome project I got an error : TypeError: Cannot read property 'name' of undefined at ImageCropperComponent.webpackJsonp.1852.ImageCropperComponent.fileChangeListener (imageCropperComponent.ts:123) at View_ImageCropperComponent1.handleEvent_0 (/ImageCropperModule/ImageCropperComponent/component.ngfactory.js:27) at View_ImageCropperComponent1.<anonymous> (view.js:664) at HTMLInputElement.<anonymous> (dom_renderer.js:489) at ZoneDelegate.invokeTask (zone.js:363) at Object.onInvokeTask (ng_zone.js:264) at ZoneDelegate.invokeTask (zone.js:362) at Zone.runTask (zone.js:166) at HTMLInputElement.ZoneTask.invoke (zone.js:416) This error will appear if you do the following : 1- hit choose file 2- select an image file or any other file 3- press open 4- hit choose file again 5- press Esc or cancel without choosing a file 6- -> javascript error in console Also the plunker example has the same error.

cstefanache commented 7 years ago

What browser do you use? I am not getting the error in Plnkr but I assume that there is a security measure of not providing file name and thus unable to check it against allowed file types. bug is valid though!

wnabil commented 7 years ago

Oh maybe then its because i am using ubuntu 16.04 LTS with chrome browser ?

wnabil commented 7 years ago

i tested it on Firefox it seems the error only appear on chrome version : Version 56.0.2924.87 (64-bit)

cstefanache commented 7 years ago

I tried to find the root cause of the issue but was not able to debug without reproducing it. Is it possible to help me by adding some debug info on imageCropperComponent.ts (122):

public fileChangeListener($event:any) { console.log($event); let file:File = $event.target.files[0];

so we can debug the $event data

wnabil commented 7 years ago

Hello @cstefanache , After debugging this ,I found that if you didn't choose a file the event target file list will be empty Adding: if($event.target.files.length === 0) return; In fileChangeListener fixing the problem It seems the chrome browser will fire the change event even if you didnt select a file but other browsers not. Thank you

cstefanache commented 7 years ago

fixed! thanks @wnabil