You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
}
}
The text was updated successfully, but these errors were encountered:
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.
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:
uploader.ts is same as yours.
upload-item.ts is:
my-upload-item.ts is:
The text was updated successfully, but these errors were encountered: