Topic: How can I avoid unsubscribe error when using file input with ng-if directive and change file input appearance?

Arsenii pro asked 5 years ago

I'm trying to get file input work correctly. I have NewsComponent which basically shows the table of news. To add or edit news NewsComponent uses modal windows (alsoMDBootstrap component). For the modal content to not save state  and work properly with different news items I use ng-if directive for modal:
<div *ngIf="isEditModalShown" mdbModal #editItemForm="mdb-modal" [config]="{ show: true }" class="modal fade scrollable" tabindex="-1" role="dialog" aria-hidden="true" (onHidden)="onEditModalHidden()">
As I understand it creates or destroys modal component whenever ng-if condition changes. The same time NewsComponent is always alive during opening/closing modals. File input for adding new picture is naturally located in the modal while correspoinding typescript code is located in NewsComponent. When I open any modal for the first time, things go well. On the second opening I get the next error: NewsComponent.html:38 ERROR ObjectUnsubscribedError {name: "ObjectUnsubscribedError", stack: "ObjectUnsubscribedError: object unsubscribed↵ a…-internal:///../../../core/esm5/core.js:14929:76)", message: "object unsubscribed", ngDebugContext: DebugContext_, ngErrorLogger: ƒ} View_NewsComponent_2 @ NewsComponent.html:38 DebugContext_.logError @ core.js:14981 ErrorHandler.handleError @ core.js:1501 (anonymous) @ core.js:5898 ZoneDelegate.invoke @ zone.js:388 @ zone.js:138 NgZone.runOutsideAngular @ core.js:4681 ApplicationRef.tick @ core.js:5898 (anonymous) @ core.js:5724 ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:4733 ZoneDelegate.invoke @ zone.js:387 @ zone.js:138 @ core.js:4550 next @ core.js:5724 schedulerFn @ core.js:4319 SafeSubscriber.__tryOrUnsub @ Subscriber.js:240 @ Subscriber.js:187 Subscriber._next @ Subscriber.js:128 @ Subscriber.js:92 @ Subject.js:56 EventEmitter.emit @ core.js:4299 checkStable @ core.js:4698 onLeave @ core.js:4777 onInvokeTask @ core.js:4727 ZoneDelegate.invokeTask @ zone.js:420 Zone.runTask @ zone.js:188 ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1517 globalZoneAwareCallback @ zone.js:1543 I don't have any idea from what and how must I unsubscribe in the file input. I would prefer to use basic solution for file input because it works fine but I fail to customize its appearance using mdboostrap classes: html:
<div class="md-form form-sm">
  <input type='file' mdbFileSelect #fileInput (change)="readUrl($event)">
  <img [src]="url">
url: string = "";
readUrl(event:any) {
  if([0]) {
    var reader=newFileReader();
    reader.onload= (event:any) => {;'https://address...',, this._getHeaders()).subscribe((r) => {
        alert("File added"+r);
      }, (r) => {
        alert("ERROR: file not added!"+r);
So basically I need the following interface. An image button with "+" sign. When clicking file input dialog is shown, when file selected it replaces the image on button. So I don't need extra button, I don't need file list, I just need image which is blank when nothing is selected or filled with selected image. Clicking on image you can change selected file. How can achieve such interface using mdboostrap components or change default browser provided file input apperance using mdbootstrap classes?

Dawid Adach pro commented 5 years ago

Dear Arsenii, Please check following plunker and let me know if that suits you :

Arsenii pro commented 5 years ago

Hello Dawid, Thank you, this is really what I've needed. Can you please explain why I'm getting an error with standard MDBootstrap file input widget?

Dawid Adach pro commented 5 years ago

Unfortunately I wasn't able to reproduce you use case, however I hope that this solution will solve the issue.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No