TypeError: Cannot read property 'name' of undefined

[tanvirshuvo]

I am trying to integrate your library to my angular2 application. After clicking the uploading button the server returns "Internal server error: 500" and I see "TypeError: Cannot read property 'name' of undefined".

The server is responding well and receiving the file from Postman. But not from my application.

Can you please check what is going wrong here?

Here is my component:

import { Component }     from '@angular/core';
import { Uploader }      from '../services/uploader';
import { MyUploadItem }  from '../services/my-upload-item';

@Component({
    template: `<div class="bs-docs-section">
    <div class="row">
        <div class="col-md-12">
            <div class="bs-component">
                <div class="jumbotron" style=" padding-left: 100px; padding-right: 100px;">

                    <legend>Hi, User</legend>

                    <form class="bs-component" role="form">
                        <div class="form-group is-empty is-fileinput">
                            <input type="file" id="sampleFile">
                            <div class="input-group">
                                <input type="text"  class="form-control"
                                       placeholder="Choose an image file of your document">
                                <span class="input-group-btn input-group-sm">
					  <button type="button" class="btn btn-fab btn-fab-mini">
						<i class="material-icons">attach_file</i>
					  </button>
					</span>
                            </div>
                            
                        </div>
              
                        <div style="text-align: center">
                            <a class="btn btn-raised btn-lg btn-success" (click)="submit()">Upload<div class="ripple-container"></div></a>
                        </div>
                    </form>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>`

})
export class OCRNewComponent {
    constructor(public uploaderService: Uploader) { }

    submit() {
        let uploadFile = (<HTMLInputElement>window.document.getElementById('sampleFile')).files[0];


        let myUploadItem = new MyUploadItem(uploadFile);
        myUploadItem.formData = {FormDataKey: 'sampleFile'  };  // (optional) form data can be sent with file

        this.uploaderService.onSuccessUpload = (item, response, status, headers) => {
            // success callback
            // console.log(response.toString());
        };
        this.uploaderService.onErrorUpload = (item, response, status, headers) => {
            // error callback

            // console.log(response.toString());
        };
        this.uploaderService.onCompleteUpload = (item, response, status, headers) => {
            // complete callback, called regardless of success or failure
            // console.log(response.toString());
        };
        this.uploaderService.onProgressUpload = (item, percentComplete) => {
            // progress callback
            console.log(percentComplete);
        };
        this.uploaderService.upload(myUploadItem);
    }
}

uploader.ts is same as yours.

upload-item.ts is:

export class UploadItem {
    method: string = 'POST';
    url: string = '';
    headers: any = {};
    formData: any = {};
    withCredentials = false;
    alias: string = 'file';
    file: any = {};
}

my-upload-item.ts is:

import { UploadItem }    from './upload-item';

export class MyUploadItem extends UploadItem {
    constructor(file: any) {
        super();
        this.url = 'http://ip:port/upload'; //ip is my endpoint's ip and port is my endpoint's port number
        this.headers = {};
        this.file = file;
    }
}

[j-zeng]

You want to track down where 'undefined' is coming from and then go from there. Perhaps log your 'uploadFile' to see if it's being set at the time of your submit.