CODEWITHSUNDEEP
angularasp.net-web-api
love prince
love prince

Reputation: 149

Angular2 File Upload with WebApi

Angular2 I want upload file and save file on server folder, but I can't get HttpContext.Current.Request.Files, it always null. My code
-UploadService.ts

 postFileUpLoad(url: string, data: any): any {
    let headers = new Headers();
    if (localStorage.getItem('localStorage') != null) {
        headers.append('Content-Type', 'multipart/form-data')
        headers.append('Authorization', "Bearer " + JSON.parse(localStorage.getItem('localStorage')).idToken);
    }
    this.slimLoadingBarService.startLoading();
    return this.http.post(url, data, {
        headers: headers
    })
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
}

-Upload File Component 

onChange(event) {
let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        let file: File = fileList[0];
        let formData: FormData = new FormData();
        formData.append('uploadFile', file, file.name);
       this.httpService.postFileUpLoad('http://localhost:3000/api/uploadFile', formData);
    }}


- HTML

<input type="file" id="btnUpload" value="Upload" name="FileUpLoad" (change)="onChange($event)" class="upload" />

- Api Service Upload

[HttpPost]
    [Route("uploadFile")]
    public HttpResponseMessage UploadJsonFile()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        var abc = Request.Properties.Values;
        var httpRequest = HttpContext.Current.Request;
        if (httpRequest.Files.Count > 0)
        {
            foreach (string file in httpRequest.Files)
            {
                var postedFile = httpRequest.Files[file];
                var filePath = HttpContext.Current.Server.MapPath("~/UploadFile/" + postedFile.FileName);
                postedFile.SaveAs(filePath);
            }
        }
        return response;
    }

Please help me, thanks a lot!

Upvotes: 3

Views: 3560

Answers (2)

Canberk Dogmus
Canberk Dogmus

Reputation: 55

You must remove this line.

   headers.append('Content-Type', 'multipart/form-data')

And after it will work.

Upvotes: 4

Jose Francis
Jose Francis

Reputation: 960

Change your API method like below : 

[HttpPost]
[Route("uploadFile")]
public HttpResponseMessage UploadJsonFile()
{
    HttpResponseMessage response = new HttpResponseMessage();
    var abc = Request.Properties.Values;
    var httpRequest = HttpContext.Current.Request;
    var fileCount = httpRequest.Files.Count;
    if (httpRequest.Files.Count > 0)
    {
        for (int i=0; i< fileCount ; i++)
        {
            var postedFile = httpRequest.Files[i];
            var filePath = HttpContext.Current.Server.MapPath("~/UploadFile/" + postedFile.FileName);
            postedFile.SaveAs(filePath);
        }
    }
    return response;
}

You will get the file in "postedFile".

Upvotes: 0

Related Questions