CODEWITHSUNDEEP
angularasp.net-web-apifile-upload
amin89
amin89

Reputation: 437

Upload a File with ng2-Uploader (Angular2) & .net core

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

Upvotes: 4

Views: 2736

Answers (1)

Pierre Fiorelli
Pierre Fiorelli

Reputation: 129

If you use IFormFile file as parameter of your action, you can only upload one file, and the name of the parameter (the name of your input) must be 'file'. Unfortunately i don't know how to set it with ng2-uploader.

I suppose that you can use an array as parameter to upload multiple files.

I haven't used it with ng2-uploader yet but I will. I will keep you in touch :)

EDIT: after playing with it a bit, you can set the field name in the options of your uploader, by default the name is file. I upload only file by file and it work with IFormFile file, but if you want to upload multiple files i think that you just have tu use IFormFile[] file. And of course if you want to use IFormFile[] files, just don't forget to change the name in the options ;)

Upvotes: 5

Related Questions