Send file from angular to .NET Core

Question

I've been trying to send xls (or any other) file from my angular application to .NET core controller. I tried so many ways and none of them worked...

this is my component where on button click I cal my service:

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

const url = 'http://localhost:44328/api/Student';
this.studentService.postFile(this.url, this.fileToUpload)
  .subscribe((res: any) => {
  },
    (err) => {
      if (err.status === 401) {
      } else {
      }
    });

}

here's service method:

 postFile(url: string, fileToUpload: File): Observable<Response> {
    const formData: FormData = new FormData();
    formData.append('File', fileToUpload, fileToUpload.name);
    const headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    const options = new RequestOptions({ headers });
    return this.http.post(url, formData, options);
}

And here's my controller:

 [Route("/api/[controller]")]
public class StudentController : Controller
{
    private readonly IStudentsService _service;
    public StudentController(IStudentsService service)
    {
        _service = service;
    }

    [HttpPost, DisableRequestSizeLimit]
    public ActionResult UploadFile()
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var httpRequest = HttpContext.Request.Form;//.....
    }
}

But the request never comes... I get POST http://localhost:44328/api/Student net::ERR_CONNECTION_RESET

In my startup.cs class I added cors and everything seems correct, and I really don't understand what's wrong here..

startup.cs:

public void ConfigureServices(IServiceCollection services)
    {
        services.AddAutoMapper(x => x.AddProfile(new MappingsProfile()));
        services.AddDbContext<museumContext>(options =>

                  services.AddCors(options =>
        {
            options.AddPolicy("AllowAllOrigins",
                builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());
        });

        services.Configure<MvcOptions>(options =>
        {
            options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAllOrigins"));
        });
        services.AddMvc();
    }
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }


        app.UseCors(builder =>
            builder.WithOrigins("http://localhost:44328")
       .AllowAnyHeader()
       .AllowAnyMethod()
       .AllowCredentials());
        app.UseAuthentication();
        app.UseCors("AllowAllOrigins");
        app.UseMvc();
    }

What is wrong here? I'm really out of ideas, maybe I need a fresh thoughts on this after spending so much time

Answer 1

I've been through the same scenario and here's how I achieved it.

upload-view.component.html

<div fxLayout="column" fxLayoutAlign="start center" class="update-upload">
    <form id="updateFormHtml" fxLayout="row" fxLayoutAlign="center center" #updateForm="ngForm" (submit)="uploadFile()">
    <div class="file-dropzone">
      <label for="file" class="text">Click here or Drag and Drop file here</label>
      <input id="file" type="file" accept=".json" (change)="setChosenFile($event)" />
    </div>
  </form>
  <div *ngIf="chosenFileName" fxLayout="column" fxLayoutAlign="start center" class="file-info">
    <div class="file-name">{{ chosenFileName }}</div>
    <button form="updateFormHtml" mat-raised-button color="primary">Upload</button>
  </div>
</div>

My upload-view.component.ts has this class:

export class AdminViewComponent {
  chosenFileName: string;
  chosenFile: any;

  constructor(private snackbar: MatSnackBar, private uploadService: UploadService)   { }

  setChosenFile(fileInput: Event) {
    console.log(fileInput);
    const control: any = fileInput.target;
    if (!control.files || control.length === 0) {
      this.chosenFileName = null;
      this.chosenFile = null;
    } else {
      this.chosenFileName = control.files[0].name;
      this.chosenFile = control.files[0];
    }
  }

  uploadFile() {
    const uploadData = new FormData();
    uploadData.append('file', this.chosenFile, this.chosenFileName);
    console.log(uploadData);

    this.uploadService
        .uploadFile(uploadData)
        .subscribe(
          (response) => {
            this.snackbar.open('File uploaded successfully', null,
            {
              duration: 7000, verticalPosition: 'top',
              horizontalPosition: 'center'
            });
          },
          (error) => {
            this.snackbar.open(error.status, null,
              {
                duration: 7000, verticalPosition: 'top',
                horizontalPosition: 'center'
              });
          }
        );
  }
}

In upload.service.ts had this method

public uploadFile(data: any) {
    const url = `${this._baseUrl}/api/script/status`;
    return this.httpClient.post<ActionResponse>(url, data, { headers: new HttpHeaders({
      'Authorization': `Bearer ${this.Token}`
      })
    });
  }

Here is my .Net Core controller method:

[HttpPost("upload")]
public IActionResult UploadFile([FromForm(Name ="file")] IFormFile resultFile)
{
    if (resultFile.Length == 0)
        return BadRequest();
    else
    {
        using (StreamReader reader = new StreamReader(resultFile.OpenReadStream()))
        {
            string content = reader.ReadToEnd();
            //Removed code
        }
    }
}