Loading

I get error property name when upload data ?

I get error property name when upload data ?

ahmed elbarbary

5y653.NET

I work on angular 7 project I face issue I get error Name when upload data

core.js:4197 ERROR TypeError: Cannot read property 'name' of undefined
at UploadComponent.uploadFile (upload.component.ts:96)
at UploadComponent_Template_button_click_5_listener (upload.component.html:6)
at executeListenerWithErrorHandling (core.js:14286)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:14321)
at HTMLButtonElement.<anonymous> (platform-browser.js:582)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27394)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

I get this error on line below :

formData.append('file', fileToUpload, fileToUpload.name);

full uplod code

component.html

<div class="col-md-3">
<input type="file" #file placeholder="Choose file" multiple>
<button type="button" class="btn btn-success" (click)="uploadFile(file)">Upload Filebutton>
div>

component.ts

public uploadFile = (files) => {
if (files.length === 0) {
return;
}
let fileToUpload = <File>files[0];
const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);
this.http.post('https://localhost:44396/api/ApprovalQuality/', formData, {reportProgress: true, observe: 'events'})
.subscribe(event => {
console.log("success");
console.log(event.type);
if (event.type === HttpEventType.UploadProgress)
{
console.log("progress");
this.progress = Math.round(100 * event.loaded / event.total);
}
else if (event.type === HttpEventType.Response) {
this.message = 'Upload success.';
this.onUploadFinished.emit(event.body);
}
});
}

so How to solve this error please ?

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Your fileToUpload is null for sure,
check the line below
let fileToUpload = <File>files[0]; // here are you getting the selected file?
Step 1: HTML Template (file-upload.component.html)

Define simple input tag of type file. Add a function to (change)-event for handling choosing files.
"form-group">
    for="file">Choose File
    "file"
           id="file"
           (change)="handleFileInput($event.target.files)">

Step 2: Upload Handling in TypeScript (file-upload.component.ts)

Define a default variable for selected file.

fileToUpload: File = null;

Create function which you use in (change)-event of your file input tag:

handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
}

If you want to handle multifile selection, than you can iterate through this files array.

Now create file upload function by calling you file-upload.service:

uploadFileToActivity() {
this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
// do something, if upload success
}, error => {
console.log(error);
});
}

Step 3: File-Upload Service (file-upload.service.ts)

By uploading a file via POST-method you should use FormData, because so you can add file to http request.

postFile(fileToUpload: File): Observable {
const endpoint = 'your-destination-url';
const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);
return this.httpClient
.post(endpoint, formData, { headers: yourHeadersConfig })
.map(() => { return true; })
.catch((e) => this.handleError(e));
}