Angular 2 With Web API File Upload

Question

I am trying to upload file using Angular 2 with web API but I am not getting file on the server.

My Controller method is

 [HttpPost]
    [Route("add")]
    public IHttpActionResult Add(CourseDto course)
    {
        try
        {
            return Ok("");
            //course.CompanyId = User.Identity.GetUserId<int>();
            //var result = _courseService.Add(course);
            //return Ok(result.Message);
        }
        catch (Exception ex)
        {

            return BadRequest(ex.Message);
        }

    }

My CourseDto is

public class CourseDto

    {
        public int Id { get; set; }
        public HttpPostedFileBase CourseFile { get; set; }
    }

My Html file is

<form class="form-horizontal" #courseForm="ngForm" (ngSubmit)="onSubmit()" enctype="multipart/form-data">

            <div class="form-group">
                <label class="control-label col-sm-4">Browse Course:</label>
                <div class="col-sm-8">
                    <input type="file" name="file" (change)="onChange($event)"/>

                </div>
            </div>
            <footer>
                <div class="row">
                    <div class="col-md-12 col-lg-12 col-xs-12">
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary" [disabled]="!courseForm.form.valid">Add</button>
                            <button type="button" class="btn btn-default" (click)="close()">Close</button>
                        </div>
                    </div>
                </div>
            </footer>
        </form>

Course Model For typescript is

export class Course {
    constructor(
        public courseFile?:any ,
        public id?: number
    ) {
    }
}

My Angular 2 Component method is method is

onSubmit() {
        this.httpService.post("course/add", this.courseModel)
            .subscribe(result => {
                this.loggerService.notify(this, "Courses added successfully", Toast[Toast.success]);
                this.httpService.onUpdateModel();
                this.refreshModel();
            }, error => {
                console.log(error);
            });
    }

    onChange(event) {
        this.courseModel.courseFile =event.target.files[0]; 

    }

Angular 2 Http Post Method is

post(url: string, data: any) {
        url = `${appConfig.apiUrl}${url}`;

        this.progressBarService.RequestStarted();


        return this.http.post(url, data)
            .finally(() => this.progressBarService.RequestFinished())
            .map((result: Response) => result.json())
            .catch(this.handleError);
    }

I successfully received the model in my Web API controller but without File. How to send the file to the web api controller model?

Tarek.Eladly · Accepted Answer · 2017-05-23 09:53:50Z

4

try this

HttpResponseMessage response = new HttpResponseMessage();  
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);
    }
}

thanks to Angular 2 - File Upload using Web API

hope this help

answered May 23, 2017 at 9:53

Tarek.Eladly

75913 silver badges27 bronze badges

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

2 Comments

Kadaj Over a year ago

God bless your soul, for saving me from this monstrosity I got myself into.

Tarek.Eladly Over a year ago

Anytime dude :)

Rejwanul Reja · Accepted Answer · 2017-11-28 17:43:49Z

Step1: Ng2/4 Html-

 <input type="file" name="ProfilePhoto" id="ProfilePhoto" />

Step2: Ng2/4 Component-

import { ElementRef} from '@angular/core';
let files=this.elem.nativeElement.querySelector('#ProfilePhoto').files;
      let formData:FormData=new FormData();

      let file=files[0];
      formData.append('ProfilePhoto',file,file.name);         
      this.systemUserService.uploadSystemUserProfilePhoto(this.loginResponse.token,formData).subscribe(data => {  
      });

on service to be added below--- Note: here i used token based athentication, you can use normal http post.

uploadSystemUserProfilePhoto(token:string,formData: FormData): Observable<GlobalBaseResponse> {
            let options=this.getFileUploadHeader(token);                              
           return this.http.post(`${this.globalConstant.baseApiUrl}/account/uploadSystemUserProfilePhoto`, formData, options)
                   .map((response: Response) => {
                           this.globalBaseResponse = response.json();
                           return this.globalBaseResponse;
                   });
   }

           private getFileUploadHeader(token:string):RequestOptions{
            let headers = new Headers({ 
                    'Data-Type': 'json',
                    // 'Content-Type': false,
                    // 'Process-Data':false,
                    'Authorization':'Bearer '+token 
            });
            let options = new RequestOptions({ headers: headers });
            return  options;
    }

Step3: on Asp.net web api project api controller method-

    [HttpPost]
    [Route("uploadsystemuserprofilephoto")]       
    public IHttpActionResult UploadSystemUserProfilePhoto()
    {
        var response = new ResponseModel();

        var httpResponseMessage = new HttpResponseMessage();
        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($"~/webshared/user/{postedFile.FileName}");
                postedFile.SaveAs(filePath);
            }
        }           

        response.IsSuccess = true;
        response.Message = "Success, User profile photo updated!";
        return Ok(response);            
    }

I think this will helpful for you. Thanks

Collectives™ on Stack Overflow

Angular 2 With Web API File Upload

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related