ng2-image-upload Delete Image Error

Delete Image Error

Open tawsif93 opened this issue 6 years ago • 16 comments

When Image Limit completed, then only the clear button is visible. If I remove all the images or A single image, I'm getting an error from the component. Also, delete event is not fired.

UploadDocumentComponent.html:18 ERROR TypeError: Cannot read property 'nativeElement' of undefined at ImageUploadComponent.deleteAll (image-upload.component.js:85) at Object.eval [as handleEvent] (ImageUploadComponent.html:27) at handleEvent (core.js:13589) at callWithDebugContext (core.js:15098) at Object.debugHandleEvent [as handleEvent] (core.js:14685) at dispatchEvent (core.js:10004) at eval (core.js:10629) at HTMLButtonElement.eval (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751)

Jun 06 '18 02:06 tawsif93

Yes same issue here... I don't know it's good practice or not (of course not :) ) but it solved my issue by commenting out this line in ImageUploadComponent.prototype.deleteFile

this.inputElement.nativeElement.value = ''; in

/node_modules/angular2-image-upload/lib/image-upload/image-upload.component.js

Jun 06 '18 11:06 majidnk01

@majidnk01 Obviously its not a good approach, when you are working remote. It will solve my current development problem but will cause problem for others.

Jun 07 '18 10:06 tawsif93

Same issue on Angular 6 with your last version.

Jun 07 '18 15:06 clap8

I found a workaround for this issue, just call contents of deleteAll() method directly in your code:

...
@ViewChild('logoUploader') logoUploader: ImageUploadComponent;
...
// this.logoUploader.deleteAll();
this.logoUploader.files.forEach(f => this.logoUploader.removed.emit(f));
this.logoUploader.files = [];
this.logoUploader.fileCounter = 0;
...

Jun 24 '18 15:06 ramajd

the same here

Jul 04 '18 11:07 MarwaAbuEssa

I've the same problem. Think had resolved this problem but no published in the npm yet.

Jul 16 '18 18:07 Xhamps

Publish it on npm, please

Jul 17 '18 14:07 felipefialho

@aberezkin , @UncleDave Can you please publish this update?

Jul 24 '18 07:07 tawsif93

I'm having the same issue and it hasn't been published on npm yet!

Aug 01 '18 18:08 xpvo

Same here +1 however only when the [max] property is set. If this is left off then it works fine?!

Aug 10 '18 09:08 Taylorsuk

The problem is the parameter [max]="xxxxx" I solve my problem, remove the parameter and add the parameter [beforeUpload]="onBeforeUpload". private fileCounter = 0;

onBeforeUpload = (metadata: UploadMetadata) => { if (this.fileCounter >= xxx) { metadata.abort = true; } else { this.fileCounter++; } return metadata; };