Two of the first angular module's I wrote were built to work together very well, they are angular-file-uploader and angular-file-model.

angular-file-model works as you actually expect ng-model to work by default with files, that means: takes the data from an <input type='file'> and makes it available on the object passed to ng-model.

angular-file-uploader does the thing the regular $http.post does not: letting you know about the current state of the upload in percentages.

Installing it is:

~$ bower install angular-file-uploader angular-file-model

So let's take a basic uploader.html:

<input type='file' data-file-model='form.theFile'>
<button ng-click='upload()'>Upload</button>

And now file.js:

angular.module('myApp', ['angular-file-uploader', 'angular-file-model']);

angular.module('myApp').controller('UploadCtrl', [ '$scope', 'angularFileUploader', function ($scope, ngUploader) { $scope.form = {};

<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">newNames</span><span class="p">:</span> <span class="p">{</span>
    <span class="nx">$scope</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">file</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="na">name</span><span class="p">:</span> <span class="s1">'newNameWithoutExtension'</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="nx">$scope</span><span class="p">.</span><span class="nx">upload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="nx">ngUploader</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span>
    <span class="s1">'https://domain.tld/upload/path'</span><span class="p">,</span>
    <span class="nx">$scope</span><span class="p">.</span><span class="nx">form</span><span class="p">.</span><span class="nx">file</span><span class="p">,</span>
    <span class="nx">config</span>
  <span class="p">).</span><span class="nx">then</span><span class="p">(</span>
    <span class="nx">success</span><span class="p">,</span>
    <span class="nx">error</span><span class="p">,</span>
    <span class="nx">progress</span>
  <span class="p">);</span>
<span class="p">};</span>

<span class="kd">function</span> <span class="nx">success</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span><span class="p">);</span>
<span class="p">};</span>

<span class="kd">function</span> <span class="nx">error</span> <span class="p">(</span><span class="nx">errorMsg</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">errorMsg</span><span class="p">);</span>
<span class="p">};</span>

<span class="kd">function</span> <span class="nx">progress</span> <span class="p">(</span><span class="nx">status</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">status</span><span class="p">);</span>
<span class="p">};</span>

} ]);