Angular – How to Resolve: TypeError: Cannot convert undefined or null to object

angulartypescript

I am creating an angular2 project and I am using ng2-uploader as the plugin for file upload. I want to drag and drop on a div and at the same time I want an upload button inside the div. After selecting a file to upload I got the error as
TypeError: Cannot convert undefined or null to object.

Html code is: 

<div [hidden]="!onUpload" ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)">
     <input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">
     <p><span>Response: {{ uploadFile | json }}</span></p>
</div>

Component is:

import { Component, OnInit, NgModule, NgZone } from '@angular/core';

@Component({
  selector: 'app-fileselect',
  templateUrl: './fileselect.component.html',
  styleUrls: ['./fileselect.component.css']
})

export class FileSelectComponent implements OnInit {
  zone: NgZone;
  hasBaseDropZoneOver: boolean = false;
  basicProgress: number = 0;
  uploadFile: any;

constructor() {
    this.zone = new NgZone({ enableLongStackTrace: false });//file upload    
  }

options: Object = {
    url: 'http://localhost:4200/assets/documents'
  };

handleUpload(data): void {
    if (data && data.response) {
      data = JSON.parse(data.response);
      this.uploadFile = data;
      this.zone.run(() => {
        this.basicProgress = data.progress.percent;
      });
    }
  } 

fileOverBase(e: any): void {
        this.hasBaseDropZoneOver = e;
      }
    }

Best Answer

Response: {{ uploadFile | json }}

Due to this structure you are getting this error, when you upload the item using input file, it will automatically trigger the parent div ('ngFileDrop'). So it will call up the function with empty data. This process will make the error.

So you can do one thing simply place the input button out side the parent div and try. It will work for sure.

    <div [hidden]="!onUpload" ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)">       
         <p><span>Response: {{ uploadFile | json }}</span></p>
    </div>
  <input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">

Now you can position the input button inside the div using some css.

Just check it out.

Related Topic