How to upload video file through FormData to Azure Datalake?

Question

I need to upload video file to azure datalake but while upload from form i am not able to call controller method in asp.net core MVC application. remaining all files i am able to uploading like png,txt, xls... but while uploading video file it is not at all calling controller method. please help me how to solve this. i am using angular2 application. my upload code is

<form method="post" enctype="multipart/form-data" class="pure-form">
<input #fileInput type="file" multiple />
        <label>Select Tenant : </label>
<button (click)="addFile()" class="submit"> Upload </button>
</form>

My service method is

upload(files: any, tenantname: any) {
    let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
        formData.append("files", files[i]);
    } return this.http
    .post("api/values", formData).map(response => console.log(response));}

And My Controller method is

  public async void Post([FromForm] IFormCollection filesData)
    {

        var files = filesData.Files;
        var iformFiles = files.ToList();
        var file = iformFiles[0];       }

this controller method is not yet all calling while uploading video and audio files. remaining all the formats it is working.

please help me how to solve this problem.

Answer 1

As far as I know, if we use angular2 to upload file to the MVC controller, we will not use the html form tag. It will directly use form to post not use the click function.

Besides, if you want to use IFormCollection in method, you need set the IFormCollection arg's name equals with formData's parameters.

For example:

public async void Post([FromForm] IFormCollection filesData)

 //must the parameter must be same

 formData.append("filesData", files[i]);

So I suggest you could follow below codes and test again.

Html:

<input #fileInput type="file" multiple />
<label>Select Tenant : </label>
<button (click)="addFile()" class="submit"> Upload </button>

ts:

import { Component, ViewChild, NgModule } from '@angular/core';
import { UploadService } from './upload.service';
import { HttpClient } from "@angular/common/http";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor(private http: HttpClient) { }

    title = 'app';
    @ViewChild("fileInput") fileInput;

    addFile(): void {
        let fi = this.fileInput.nativeElement;
        if (fi.files) {
            let fileToUpload = fi.files;
            this.upload(fileToUpload)
                .subscribe(res => {
                    console.log(res);
                });
        }
    }

    upload(fileToUpload: any) {
        let formData = new FormData();
        for (let i = 0; i < fileToUpload.length; i++) {
            formData.append("files", fileToUpload[i]);
        }

        return this.http
            .post("/api/Upload", formData);
    }

    }

ASP.NET CORE method:

[HttpPost]
[Route("/api/upload")]
public void Upload(IFormCollection files)
{
    var files1 = files.Files;
    var iformFiles = files1.ToList();
    var file = iformFiles[0];
    var file2 = iformFiles[1];
    int i = 0;
  ;
}

Result:

About how to upload these files to Azure Datalake, you could refer to this article.

---

Upload avi file.