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

Question

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

I too face this issue, Let me know the complete structure of the html, Mainly the outer div s to this upload button. — Aswin KV
– Aswin KV, Commented Oct 5, 2016 at 5:06

Aswin KV · Accepted Answer · 2016-10-05 10:04:46Z

2

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.

answered Oct 5, 2016 at 10:04

Aswin KV

1,7602 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StephaneM · Accepted Answer · 2016-09-28 10:43:51Z

0

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)">

answered Sep 28, 2016 at 10:43

StephaneM

4,8791 gold badge19 silver badges34 bronze badges

1 Comment

sainu Over a year ago

Sorry @StephaneM. Its my mistake. Actually in my program ` " `is there.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related