CODEWITHSUNDEEP
angulartypescript
sainu
sainu

Reputation: 2701

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

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;
      }
    }

Upvotes: 2

Views: 14225

Answers (2)

Aswin KV
Aswin KV

Reputation: 1750

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.

Upvotes: 2

StephaneM
StephaneM

Reputation: 4899

In your html code you're missing a " after options:

you wrote:

<input type="file" ngFileSelect [options]="options (onUpload)="handleUpload($event)">

you should have written:

<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">

Upvotes: 0

Related Questions