[解決済み] AngularJS: マルチパートフォームで簡単なファイルアップロードを実装するには？

質問

AngularJSからnode.jsサーバーにシンプルなマルチパートフォームを投稿したいです。 フォームには、1つの部分にJSONオブジェクトと他の部分に画像が含まれている必要があります。 (現在、$resourceでJSONオブジェクトのみを投稿しています)

input type="file"で始めるべきと考えましたが、AngularJSがそれにバインドできないことがわかりました。

私が見つけたすべての例は、ドラッグ＆ドロップのためのjQueryプラグインをラップするためのものです。 私は1つのファイルの単純なアップロードをしたいのです。

私はAngularJSの初心者で、独自のディレクティブを書くことに全く違和感を感じません。

どのように解決するのですか？

実際に動作するソリューションで、angularjs以外に依存するものはありません（v.1.0.6でテスト済み）。

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6)でサポートされていない ng-model をサポートしていないので、ユーザーから選択されたすべての（最終的に）ファイルを渡す、"native-way"でそれを実行する必要があります。

コントローラ

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

クールな部分は 未定義 のコンテントタイプと transformRequest: angular.identity で、$httpに正しい"content-type"を選択する能力を与え、マルチパートデータを扱うときに必要な境界を管理することができます。