Ng-File-Upload with MVC and Web API - keep getting "404 Not Found"

Question

I need to enable image loading in my AngularJS + WebAPI project. for this I use ng-file-upload according to this code example: http://monox.mono-software.com/blog/post/Mono/233/Async-upload-using-angular-file-upload-directive- and-net-WebAPI-service /

with a few zip code settings to look like this:

$scope.onFileSelect = function ($files) { console.log("on file select is running!"); //$files: an array of files selected, each file has name, size, and type. for (var i = 0; i < $files.length; i++) { var $file = $files[i]; (function (index) { Upload.upload({ url: "/api/Uploads/Upload", // webapi url method: "POST", file: $file }).progress(function (evt) { // get upload percentage console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function (data, status, headers, config) { // file is uploaded successfully console.log(data); }).error(function (data, status, headers, config) { // file failed to upload console.log(data); }); })(i); } } 

I already have several web API controllers, and I added a new one according to the sample code in the link above (which inherits from System.web.http.ApiController instead of the "regular" class Microsoft.AspNet.Mvc.Controller ):

  [Route("api/[controller]")] public class UploadsController : ApiController { [HttpPost] // This is from System.Web.Http, and not from System.Web.Mvc public async Task<HttpResponseMessage> Upload() { if (!Request.Content.IsMimeMultipartContent()) { this.Request.CreateResponse(HttpStatusCode.UnsupportedMediaType); } var provider = GetMultipartProvider(); var result = await Request.Content.ReadAsMultipartAsync(provider); // On upload, files are given a generic name like "BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5" // so this is how you can get the original file name var originalFileName = GetDeserializedFileName(result.FileData.First()); // uploadedFileInfo object will give you some additional stuff like file length, // creation time, directory name, a few filesystem methods etc.. var uploadedFileInfo = new FileInfo(result.FileData.First().LocalFileName); // Through the request response you can return an object to the Angular controller // You will be able to access this in the .success callback through its data attribute // If you want to send something to the .error callback, use the HttpStatusCode.BadRequest instead var returnData = "ReturnTest"; return this.Request.CreateResponse(HttpStatusCode.OK, new { returnData }); } 

The problem is that I keep getting “404 not found” when posting.

I tried:

• all answers

• online answers

• deleting the contents of the Download function and moving to the MVC Controller base class → another result.

• change the name of the Upload method to Publish and send to / api / uploads → the same 404.

Please, help! thanks!

EDIT

this is the tab of the "Network" browser:

• I am using https

• this was tested live (without localhost) = the same result.

EDIT2

my routes:

  app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); 

these are only announced routes.

EDIT3

I am 100% sure that the problem is using the " ApiController " as the base class instead of the " Controller ". I have added a new controller and I cannot get any problems to it. now just making it work, since I don't have “Request.Content” in “ Controller ” - any ideas?

I see two possibilities to do this:

• pass HttpRequestMessage as a parameter to the method:

  Publication of a public asynchronous task ([FromBody] HttpRequestMessage request)

but I get HTTP 500 as I don’t know how to switch from angular POST.

or

2. get Request.Content for the solution in the controller (I don’t know how).

did anyone manage to do this? thanks!

Answer 1

I was able to solve the problem published in EDIT3 using:

  if (Request.Form.Files != null && Request.Form.Files.Count > 0) { var file = Request.Form.Files[0]; var contentType = file.ContentType; using (var fileStream = file.OpenReadStream()) { using (var memoryStream = new MemoryStream()) { await fileStream.CopyToAsync(memoryStream); FileStream newFS = new FileStream(Settings.UserImagesDir + "\\name.png", FileMode.Create); memoryStream.WriteTo(newFS); newFS.Close(); } } } 

and all this in the regular web api controller, which is inherited from the Controller .

Thanks to everyone for your help, although no one solved it, you all pushed me in the right direction.

Answer 2

The problem is that your routing is incorrectly configured for URL /api/Uploads/Upload . To do this, you must specify a template for the Upload method, since it is not actually named after the HTTP method.

 [HttpPost("upload")] public async Task<HttpResponseMessage> Upload() { // code omitted... }