Using angular-file-uploader and angular-file-model together
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>
} ]);