Angular2 File Upload with WebApi

Question

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!

@ love prince Did you try my answer ? Is it working ?

Jose Francis
– Jose Francis

2017-02-16 13:52:40 +00:00
Commented Feb 16, 2017 at 13:52 — Jose Francis
– Jose Francis, Commented Feb 16, 2017 at 13:52
no, it now working :(

love prince
– love prince

2017-02-17 01:57:06 +00:00
Commented Feb 17, 2017 at 1:57 — love prince
– love prince, Commented Feb 17, 2017 at 1:57

Canberk Dogmus · Accepted Answer · 2017-08-02 06:25:54Z

4

You must remove this line.

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

And after it will work.

answered Aug 2, 2017 at 6:25

Canberk Dogmus

559 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jose Francis · Accepted Answer · 2017-02-16 09:33:14Z

0

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".

edited Feb 16, 2017 at 9:33

answered Feb 16, 2017 at 9:24

Jose Francis

96014 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular2 File Upload with WebApi

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related