Wie kann ich eine Datei über eine AngularJS-Ansicht/Controller in C# -Code-Behind hochladen?

Question

Ich habe eine Winkelansicht und Controller, die Benutzerdaten aus verschiedenen Formen sammeln. Die Daten aus dem Angular-Code werden dann an mehrere C# -Klassen übergeben. Die Benutzerdaten kommen derzeit als IEnumerable <> Objekt in C#; Diese Sammlung hat eine Art von FormData, eine benutzerdefinierte Klasse von 6 Eigenschaften (keine Methoden). Alle Benutzerdaten werden über das Objekt IEnumerable <> in der Eigenschaft 'Data' der FormData-Klasse gespeichert, und die Eigenschaft 'Data' ist eine Zeichenfolge. Da 'Data' eine Zeichenfolge ist, werden alle Datei-Uploads, die die C# eingeben, als Zeichenfolge und nicht als tatsächliche Datei eingefügt. Hier ist die Aussicht:

<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> 

Hier ist Teil der Steuerung:

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]); 
       } 
      } 

Sorry, das war langatmig. Gibt es eine Möglichkeit, das tatsächliche Dateiobjekt (nicht nur eine JSON-Zeichenfolge) mit dem Angular-Controller zu greifen und auf dieses Objekt in C# zuzugreifen? Danke!

Answer 1

Sie müssten im Grunde ein Formular mit den Dateieingaben senden und dann als mehrteilige Formulardaten auf dem Server verarbeiten. Die Dateien würden als Streams wirken.

Hier ist ein Beispiel mit Code, den Sie zu erhalten begonnen:

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

Answer 2

Die vollständige Lösung für dieses Problem ist unten gelegt:

//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); 
} 

die Dateien einer nach dem anderen bearbeitet ist ein hässliche Art, es zu tun, aber es funktioniert für jetzt. Wird weitere Möglichkeiten zur Verarbeitung eines ganzen Dateiarrays im Vergleich zu einer Datei in der Zukunft untersuchen.