2016-05-23 8 views
0

ウェブAPIへの角度$のアップロードからパラメータを渡すためには、どのように私はトラブル私のアップロードロジックに私のUIからパラメータを渡すを抱えている

私はこの

$upload.upload({ 
     url: "./api/import/ImportRecords", 
     method: "POST", 
     data: { fileUploadObj: $scope.fileUploadObj }, 
     fields: { 'clientId': $scope.NewImport.clientId }, 
     file: $scope.$file 
    }).progress(function (evt) { 
    }).success(function (data, status, headers, config) { 
    }).error(function (data, status, headers, config) { 
}); 

などのアップロード要求を設定していマイAPIは次のように設定されています:

[HttpPost] 
public IHttpActionResult ImportRecords() 
{ 
    var file = HttpContext.Current.Request.Files[0]; 

    // Need to read parameter here 
} 

これを達成するためのクリーン/正しい方法は何ですか。

+0

どのライブラリが$ uploadの一部ですか? – jbrown

答えて

1

$uploadを使用する必要がありますか? $httpを使用してファイルをアップロードすることは、別のプラグインを必要とせずに非常に簡単です。

工場

app.factory('apiService', ['$http', function($http){ 
    return { 
     uploadFile: function(url, payload) { 
      return $http({ 
       url: url, 
       method: 'POST', 
       data: payload, 
       headers: { 'Content-Type': undefined }, 
       transformRequest: angular.identity 
      }); 
     } 
    }; 
}]); 

コントローラ

//get the fileinput object 
var fileInput = document.getElementById("fileInput"); 
fileInput.click(); 

//do nothing if there's no files 
if (fileInput.files.length === 0) return; 

//there is a file present 
var file = fileInput.files[0]; 

var payload = new FormData(); 
payload.append("clientId", $scope.NewImport.clientId); 
payload.append("file", file); 

apiService.uploadFile('path/to/ImportRecords', payload).then(function(response){ 
    //file upload success 
}).catch(function(response){ 
    //there's been an error 
}); 

C#WebMethod属性

[HttpPost] 
public JsonResult ImportRecords(int clientId, HttpPostedFileBase file) 
{ 
    string fileName = file.FileName; 
    string extension = Path.GetExtension(fileName); 
    //etcc.... 

    return Json("horray"); 
} 
+0

これは、OPが尋ねたものではありません。これがどのようにng-file-uploadを使ってパラメータを渡すのに役立つのか分かりません。 –

-1

あなたがいると仮定すると、 ng-file-uploadを使用します。これは

[Route("ImportRecords")]     
    [HttpPost] 
    public async Task<HttpResponseMessage> ImportRecords() 
    { 
     if (!Request.Content.IsMimeMultipartContent()) 
     { 
      this.Request.CreateResponse(HttpStatusCode.UnsupportedMediaType); 
     } 

     string tempFilesPath = "some temp path for the stream" 
     var streamProvider = new MultipartFormDataStreamProvider(tempFilesPath); 
     var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true)); 
     foreach (var header in Request.Content.Headers) 
     { 
      content.Headers.TryAddWithoutValidation(header.Key, header.Value); 
     } 
     var data = await content.ReadAsMultipartAsync(streamProvider); 

     //this is where you get your parameters 
     string clientId = data.FormData["clientId"];      
     ... 
    } 

を動作するはずですそして、これはあなたが

$upload.upload({ 
     url: "./api/import/ImportRecords", 
     method: "POST", 
     data: { fileUploadObj: $scope.fileUploadObj, 
       clientId: $scope.NewImport.clientId, 
       file: $scope.$file 
     } 
      }).progress(function (evt) { 
    }).success(function (data, status, headers, config) { 
    }).error(function (data, status, headers, config) { 
}); 

$ upload.upload

を呼び出すべきであるかであることがお役に立てば幸い!

関連する問題