AngularJS angular-file-upload не может загружать данные в WebAPI 2 CORS

Question

Я пытаюсь использовать https://github.com/danialfarid/angular-file-upload для загрузки изображения в мой webAPI в другом домене.

Мой HTML:

<input 
    type="file" 
    ng-file-select="onFileSelect($files)" 
    ng-model="imgData" 
    accept="image/*" 
    ng-click="test()" > 

Мой контроллер:

app.controller('userController', [ 'removed', '$upload', 
function (removed, $upload) { 

    $scope.onFileSelect = function ($files) { 
     console.log('onFileSelect'); // --------- THIS METHOD DOES NOT FIRE 
     $http.post(serviceBase + 'api/person/image', data, { 
      withCredentials: true, 
      transformRequest: angular.identity 
     }).success('ok').error('fail'); 
    } 
    // tried different things from all the resources found online: 
    $scope.test = function() { 

     // THIS WORKS but how to get the file?? 
     // successfull call to controller method but unable to retrieve image file inside controller 
     $http.post(serviceBase + 'api/person/image', data).then(function (response) { 
      return response; 
     }); 

     // unable to call controller method ('Resourse not found', CORS issue?) 
     $scope.upload = $upload.upload({ 
      url: 'person/image', 
      headers: { 'Authorization': 'bearer placeHolderText' }, 
      file: $scope.imgData, 
      ) }; 

     // unable to call controller method ('Resourse not found', CORS issue?) 
     $http.post(serviceBase + 'api/person/image', data, { 
      withCredentials: true, 
      transformRequest: angular.identity 
     }).success('ok').error('fail');}} 

API контроллера Метод:

[HttpPost()] 
    [ActionName("image")] 
    [ResponseType(typeof(JObject))] 
    public async Task<IHttpActionResult> Postimage(HttpPostedFileBase file) 
    { 

** Обновление: Включение сведений CORS ... (Microsoft.Owin. Корс) **

My St artup.cs:

public void Configuration(IAppBuilder app) 
    { 
     HttpConfiguration config = new HttpConfiguration(); 

     ConfigureOAuth(app); 

     WebApiConfig.Register(config); 
     app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); 
     app.UseWebApi(config); 
    } 

    public void ConfigureOAuth(IAppBuilder app) 
    { 
     //use a cookie to temporarily store information about a user logging in with a third party login provider 
     app.UseExternalSignInCookie(Microsoft.AspNet.Identity.DefaultAuthenticationTypes.ExternalCookie); 
     OAuthBearerOptions = new OAuthBearerAuthenticationOptions(); 

     OAuthAuthorizationServerOptions OAuthServerOptions = new OAuthAuthorizationServerOptions() { 

      AllowInsecureHttp = true, 
      TokenEndpointPath = new PathString("/token"), 
      AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(30), 
      Provider = new SimpleAuthorizationServerProvider(), 
      RefreshTokenProvider = new SimpleRefreshTokenProvider() 
     }; 

Это наиболее вероятно, что это вопрос CORS, потому что я могу отправить к этому методу контроллера, используя $ HTTP.Post. Я включил CORS на сервере. Я читал и пробовал вещи в течение двух дней, и я ударил по кирпичной стене, любые предложения/рекомендации очень ценятся.

Update 2:

Еще один день исследований/проб и ошибок:

я могу получить это сообщение:

 $scope.upload = $upload.upload({ 
      url: 'http://localhost:26264/api/person/image', //upload.php script, node.js route, or servlet url 
      file: $scope.imgData, 
      transformRequest: angular.identity, 
      headers: { 'Content-Type': undefined } 

, но теперь я получаю «415 (Unsupported Media Type) '.. подробности от скрипача:

«Тип носителя мультимедиа типа« multipart/form-data »для этого ресурса не поддерживается». , "exceptionMessage": «No MediaTypeFormatter доступен для чтения объекта типа« HttpPostedFileBase »из контента с типом мультимедиа« multipart/form-data »».

Answer 1

Я закончил использовать ng-flow, Images Sample помог в настройке. Я также использовал this, чтобы узнать, как читать данные в моем контроллере, и, наконец, this, чтобы сохранить файл. Окончательное решение:

Контроллер:

[HttpPost()] 
    [ActionName("image")] 
    [ResponseType(typeof(JObject))] 
    public async Task<IHttpActionResult> Postimage() 
    { 
     // Check if the request contains multipart/form-data. 
     if (!Request.Content.IsMimeMultipartContent()) 
     { 
      throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 
     } 

     string root = HttpContext.Current.Server.MapPath("~/Content/Images/User"); 
     var provider = new MultipartFormDataStreamProvider(root); 

     try 
     { 
      // Read the form data. 
      await Request.Content.ReadAsMultipartAsync(provider); 

      // This illustrates how to get the file names. 
      foreach (MultipartFileData file in provider.FileData) 
      { 
       //Console.WriteLine(file.Headers.ContentDisposition.FileName); 
       //Trace.WriteLine("Server file path: " + file.LocalFileName); 
       if (File.Exists(Path.Combine(root, "test.jpg"))) 
        File.Delete(Path.Combine(root, "test.jpg")); 

       File.Move(file.LocalFileName, Path.Combine(root, "test.jpg")); 
       return Ok(); 
      } 
     } 
     catch (System.Exception e) 
     { 
     } 
     return Ok(); 
    } 

Угловой:

app.config(['flowFactoryProvider', function (flowFactoryProvider) { 
    flowFactoryProvider.defaults = { 
     target: 'myURL', 
     permanentErrors: [404, 500, 501], 
     maxChunkRetries: 1, 
     chunkRetryInterval: 5000, 
     simultaneousUploads: 4, 
     singleFile: true 
    }; 
    flowFactoryProvider.on('catchAll', function (event) { 
     console.log('catchAll', arguments); 
    }); 
    // Can be used with different implementations of Flow.js 
    // flowFactoryProvider.factory = fustyFlowFactory; 
}]); 

HTML:

<div class="form-horizontal" role="form" flow-init 
    flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" 
    flow-files-submitted="$flow.upload()"> 

<span class="btn-success" flow-btn>Upload Image</span> 
</div>