Uploading a file to the controller using typescript

Question

I am using ASP.NET MVC 5 for internal and Angular + Typescript for the frontend of a web application.

I am trying to upload a file to the server, but for some reason the controller does not receive the file as a parameter (the parameter in the controller is zero).

I am using the code below.

Thanks in advance!

HTML:

<input id="filePath" name="filePath" type="file" accept="image/*" /> <a id="uploadImage" ng-click="ctrl.uploadFile()">Upload</a> 

Typescript:

 // controller class: uploadFile(): void { var filePathInput: any = $("#filePath"); if (filePathInput[0].files) { var file: any = filePathInput[0].files[0]; var resource: any = this.service.uploadFile(); resource.save(file, (result: any) => { if (!result || !result.success) { alert("error"); } else { alert("ok"); } }); } } // service class: uploadFile(): ng.resource.IResourceClass<IMyResource> { return this.$resource("/MyController/UploadImage", null, { method: "POST" }); } 

Backend Controller:

 [HttpPost] public JsonResult UploadImage([FromBody]HttpPostedFileBase file) { if (file == null || file.ContentLength == 0) { return NullParameterResponse(); } else { file.SaveAs("/img/" + Path.GetFileName(file.FileName)); return SuccessResponse(); } } 

Answer 1

TransformRequest function: this makes your request submitted as FormData instead as a JSon object.

  formDataObject(data: any): any { var fd = new FormData(); angular.forEach(data, function (value, key) { fd.append(key, value); }); return fd; } 

In your angular resource, define the save options and pass the previously created transformRequest function.

 uploadChequeFile(): ng.resource.IResourceClass<IChequeLoanResource> { return this.$resource<IChequeLoanResource>("/Cheque/UploadChequeImage", null, { save: { method: "POST", transformRequest: this.formDataObject, headers: { 'Content-Type': undefined, enctype: 'multipart/form-data' } } }); } 

In your controller, just call the save method from the resource transferring your file.

 var chequeFilePathInput: any = $("#chequeFilePath"); if (chequeFilePathInput[0].files) { var resource: ng.resource.IResourceClass<services.IChequeLoanResource> = this.uLendService.uploadChequeFile(); resource.save({ "files": chequeFilePathInput[0].files[0] }, (result: any) => { if (!result || !result.success) { this.errorMessage = "Error al subir la imagen al servidor. Por favor contáctanos si el error persiste."; } else { this.chequeLoan.cheque.filePath = result.message; this.saveChequeLoan(); } }); } else { this.errorMessage = "La imagen del cheque es requerida."; } 

Finally, your controller should get the IList parameters (with the same name defined in your angular controller)

 public JsonResult UploadChequeImage(IList<IFormFile> files) { try { if (files != null && files.Count > 0) { return CreateResponse(true, CreateFile(files[0], @"img\cheques")); }