Angularを含むファイルをアップロードして他のフォームデータを含む投稿を

Question

AngularからWebサーバーにファイルをアップロードする方法を説明する無数の例（ここや他のサイトから）を追ってきました。私は、角度ファイルアップロードを使用し、サーバー（ノード）上のデータをMulterで処理するというソリューションに満足しています。

私が見つけることができなかったことは、他のすべてのコントローラデータを含む投稿を含むフォームからファイルをアップロードする方法です。

コントローラ：

$scope.files = []; 
$scope.name = ""; 
$scope.post = //$http post to server from service 

ビュー：

<input type="text" ng-model="name"> 
<input type="file"> 
<button ng-click="post()">Send post without page refresh</button> 

が、私は同じ記事で、[名前]と[ファイル]を送ることができる方法はありますか？私が複数のパートのデータを送信すると、[名前]と[ファイル]はOKでしょうか？ 2つの別々の投稿を送る必要がありますか？

現時点では、私の作業例は、フォームアクション "post"とenctype "multipart/form-data"で送信します。しかし、私はページをリフレッシュさせたくないので、スコープから[名前]と[ファイル]を送信したい...フォームからファイルを添付してスコープに添付するか、 DOM？

Answer 1

完全なソリューションのデモに目を通してください:)

Plunkr

<form> 

<input type="text" placeholder="Enter Name here" ng-model="newCountry.Name" /> 
<label>Choose 1 or more files:</label> 
<input type="file" ng-files="AddnewCountryFlag($files)" multiple /> 

<h3>Try Uploading Image file. It will preview your image.</h3> 
<div ng-repeat="item in imagesrc"> 
    <img src="{{item.Src}}" /> 
    <label>{{item.Size}}kB</label> 
</div> 

<input type="submit" value="Send Data" ng-click="AddCountry()" /> 

Answer 2

あなたは、アップロードする前にファイルにFORMDATAをプッシュすることができます。

$scope.uploader.onBeforeUploadItem = function(fileItem) { 
    fileItem.formData.push({name: $scope.name}); 
};