I need some help to upload a file with the ng2-uploader library & web API on Visual Studio 2015 .net Core, Angular 2 & Typescript.
Here are the docs for how to use the ng2-uploader.
The POST Request is okay but my controller returns _null_.
Here are my files:
upload.component.ts
import {
Component
} from '@angular/core';
@Component({
selector: 'app-upload',
templateUrl: './app/upload/upload.component.html'
})
export class UploadComponent {
uploadFile: any;
hasBaseDropZoneOver: boolean = true;
options: Object = {
url: 'http://localhost:65000/customersImport',
};
sizeLimit = 2000000;
handleUpload(data): void {
if (data && data.response) {
data = JSON.parse(data.response);
this.uploadFile = data;
}
}
fileOverBase(e: any): void {
this.hasBaseDropZoneOver = e;
}
beforeUpload(uploadingFile): void {
if (uploadingFile.size > this.sizeLimit) {
uploadingFile.setAbort();
alert('File is too large');
}
}
};
upload.component.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)"
(beforeUpload)="beforeUpload($event)">
<!-- drag & drop file example-->
<style>
.file-over {
border: dotted 30px red;
}
/* Default class applied to drop zones on over */
</style>
<div ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}"
(onFileOver)="fileOverBase($event)" (beforeUpload)="beforeUpload($event)">
</div>
<div>
Response: {{ uploadFile | json }}
</div>
</body>
</html>
upload.controller.cs
[Route("[controller]")]
public class CustomersImportController: Controller
{
private readonly IHostingEnvironment _environment;
public CustomersImportController(IHostingEnvironment environment)
{
_environment = environment;
}
[HttpPost]
public async Task<ActionResult> UploadCustomers(IFormFile file)
{
var uploads = Path.Combine(_environment.WebRootPath, "uploads");
try {
if (file.Length > 0)
{
using(var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
return Json("File was Uploaded");
}
catch ()
{
return null;
}
}
}
