AngularJSビュー/コントローラ経由でC＃コードビハインドにファイルをアップロードするにはどうすればよいですか？

Question

私はいくつかのフォームからユーザーデータを収集する角度表示とコントローラーを持っています。 Angularコードのデータは、いくつかのC＃クラスに渡されます。ユーザーデータは現在、IEnumerable <>オブジェクトとしてC＃に取り込まれています。このコレクションには6つのプロパティ（メソッドなし）のカスタムクラスであるFormDataの型があります。すべてのユーザーデータは、IEnumerable <>オブジェクトを介してFormDataクラスの 'Data'プロパティに格納され、 'Data'プロパティは文字列です。 'Data'は文字列なので、C＃を入力するファイルアップロードは実際のファイルではなく文字列として出力されます。

<div data-ng-controller="customFormController as formController" data-ng-init="formController.init(@Model.Form, '@Model.EmailResults', '@Model.EmailTo')"> 
    <div data-ng-if="!formController.loading && !formController.submitted" mc-form data-on-submit="formController.submit(model, formData)" data-on-file-select="formController.fileSelect(e)"> 
    <!--form fields are added dynamically via a separate set of Angular/C# controllers--> 
</div> 
</div> 

ここでは、コントローラの一部です： はここに、ビューの

self.submit = function (model, formData) { 

       var deferred = $q.defer(); 

       var formPostData = { 
        formId: self.formId, 
        data: formData, 
        emailData: self.emailData, 
        emailTo: self.emailTo, 
        saveData: true 
       }; 

       customFormService.postData(formPostData).then(function (result) { 

        self.submitted = true; 
        deferred.resolve(result); 

        window.location.href = '#form-' + self.formId; 

        // push any files 
        if (typeof window.FormData !== 'undefined' && result) { 
         var formData = new FormData(); 

         if (fileList && fileList.length) { 
          for (var f in fileList) { 
           if (fileList.hasOwnProperty(f)) { 
            formData.append('file', fileList[f]); 
            console.log('Files added to formData property'); 
} 
          } 
          customFormService.postFiles(result.data, formData); 
          console.log('files posted to customFormService'); 
         } 
        } 
       }, function (err) { 
        deferred.reject(err); 
       }); 
       return deferred.promise; 
      } 
//Here's the file-select method: 
      self.fileSelect = function (e) { 
       for (var x = 0; x < e.length; x++) { 
        fileList.push(e[x]); 
       } 
      } 

申し訳ありませんが、それは長いったらしいました。 Angularコントローラを使用して実際のファイルオブジェクト（JSON文字列だけでなく）を取得し、そのオブジェクトにC＃でアクセスする方法はありますか？ ありがとう！

Answer 1

基本的に、ファイル入力を含むフォームを送信し、それをサーバー上の複数パートフォームデータとして処理する必要があります。ファイルはStreamsとして渡ります。

http://www.strathweb.com/2012/08/a-guide-to-asynchronous-file-uploads-in-asp-net-web-api-rtm/

Answer 2

この問題の完全な解決策を以下にレイアウトされています：

は、ここでは、始めるためのコードと例だ時に

ファイルを1つずつ処理

//get files from custom form controls 
self.fileSelect = function (files) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     console.log("about to encode"); 
     $scope.encoded_file = btoa(e.target.result.toString()); 
    }; 
    reader.readAsBinaryString(files[0]); 
    self.file = files[0]; 
    filesFromFileSelect.push(files[0]); 
} 

//need to post files one at a time. a loop iterates through the files array. 
customFormService.postFiles(filesFromFileSelect[i], formDataForFile, self.formId, strResult, formFieldId) 
    .success(function (data) { 
     self.submitted = true; 
     console.log('file posted', data); 
    }) 
    .error(function (data) { 
     self.submitted = false; 
     console.log('error posting file. Message: ', data); 
    }); 

//inside the service posting the files... 
function postFiles(postfile, formData, formId, strResult, formFieldId) { 
    var fd = new FormData(); 
    fd.append("data", JSON.stringify(formData)); 
    fd.append('file', postfile); 

    return $http.post('/api/customformfile/post?id=' + formId + '&submissionGuid=' + strResult + '&formFieldId=' + formFieldId, fd, { 
       withCredentials: false, 
       headers: { 
        'Content-Type': undefined 
       }, 
       transformRequest: angular.identity 
      }); 
    } 

//essential parts of the server-side controller handling the files... 
var httpPostedFile = HttpContext.Current.Request.Files["file"]; 
if (httpPostedFile != null) { 
    var savePath = "\\someFile\someOtherFile"; 
} 

try { 
    var uploadsDirectory = savePath; 
    string pathToCheck = savePath + fileName; 
    char[] charsToTrim = { '"', '\\', '/' }; 
    string trimmedFileName = fileName.Trim(charsToTrim).Replace(' ', '_'); 
    string tempFileName = trimmedFileName; 

    if (File.Exists(pathToCheck)) 
    { 
     int copyCount = 2; 
     while (File.Exists(pathToCheck)) 
     { 
      //insert copy number of file before file extension 
      if (tempFileName.IndexOf('.') != -1) 
      { 
       tempFileName = trimmedFileName.Insert(trimmedFileName.IndexOf('.'), "_(" + copyCount + ")"); 
      } 

      pathToCheck = savePath + tempFileName; 
      copyCount++; 
     } 
     httpPostedFile.SaveAs(Path.Combine(uploadsDirectory, tempFileName)); 
    } 
    else 
    { 
    httpPostedFile.SaveAs(Path.Combine(uploadsDirectory, trimmedFileName)); 
    } 
} 
catch(Exception fileEx) { 
    //log the error 
    return Request.CreateResponse(HttpStatusCode.InternalServerError, exc.Message); 
} 

ですそれを行う醜い方法、それは今のところ動作します。将来、ファイルアレイ全体を1つのファイルに対して処理する他の方法を調査します。