HttpContext.Current.Request.Files.Count returning null every time. I want to upload a file to a folder in the server

Question

This is the request payload I get.

 fileChange(event) {
debugger;
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);
  let httpHeaders = new HttpHeaders()
  .set('Authorization', 'Bearer ' + this.access_token)
  .set('Content-Type', 'multipart/form-data');

  let endpoint = "Online/UploadImage";
  this.httpClient
  .post(this.host + endpoint, formData, { headers: httpHeaders, responseType: 'json' })
  .subscribe(data => {
        // do something, if upload success
        console.log(data);
        }, error => {
          console.log(error);
        });
}

}

Above is my ts file in Angular

                        <input type="file" (change)="httpService.fileChange($event)" name="uploadFile"/>

Above is my HTML file

 [HttpPost]
    [Route("api/Online/UploadImage")]
    public string UploadFile()
    {
        var file = HttpContext.Current.Request.Files.Count > 0 ?
            HttpContext.Current.Request.Files[0] : null;

        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);

            var path = Path.Combine(
                HttpContext.Current.Server.MapPath("~/Resources/Images/"),
                fileName
            );

            file.SaveAs(path);
        }

        return file != null ? "~/Resources/Images/" + file.FileName : null;
    }

And here is my web API in ASP.Net.

I'm really stuck as to why the current request is returning null? I can see that the front-end seems to be working okay.. But really I'm quite confused as to how to upload a file to my server. Please recommend what I should do to achieve that.

You need to add the header to http like you did in working code: let httpHeaders = new HttpHeaders() .set('Authorization', 'Bearer ' + this.access_token) .set('Content-Type', 'multipart/form-data'); — jdweng, Jul 07 '20 at 15:14
Whereabouts do I add the header? In the web API? Sorry I'm fairly new to this — Jack Bennett, Jul 07 '20 at 15:19
There are two types of headers in Net. The predefined ones that have a property name in the Header collection. And the ones where you can add a KeyValuePair See : https://stackoverflow.com/questions/8519788/add-custom-header-in-httpwebrequest — jdweng, Jul 07 '20 at 15:24
Thank you for your help. When you said about the headers being needed in Net I thought I'd take the headers away from the TS file. It actually worked! I will look at what you've sent. Cheers! — Jack Bennett, Jul 07 '20 at 15:36

score 0 · Answer 1 · answered Jul 07 '20 at 15:38

fileChange(event) {
// debugger;
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);
  let httpHeaders = new HttpHeaders()
  // .set('Authorization', 'Bearer ' + this.access_token)
  // .set('Content-Type', 'multipart/form-data');

  let endpoint = "Online/UploadImage";
  this.httpClient
  .post(this.host + endpoint, formData)
  .subscribe(data => {
        // do something, if upload success
        console.log(data);
        }, error => {
          console.log(error);
        });
}

I managed to figure it out thanks to jdweng pointing out the headers. All I did was comment them out and it seemed to give me the desired response. Hopefully, this helps someone.

HttpContext.Current.Request.Files.Count returning null every time. I want to upload a file to a folder in the server

1 Answers1