Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I can't answer your question directly, except to say: make sure you have the <code>data-url</code> set on your input from the example on JSFiddle.</p> <p>As an alternative, I would recommend <a href="https://github.com/danialfarid/angular-file-upload" rel="nofollow">angular-file-upload</a> which I've used with success. It uses angular directives to accomplish the uploading. This pattern uses a little more code, but separates the concerns in your application so you Controller just glues things together, and your service actually talks to the outside world. </p> <p>This will make your app easier to test:</p> <pre><code>&lt;div ng-controller="FileUploadController"&gt; &lt;h3&gt;Upload a file&lt;/h3&gt; &lt;input type="file" ng-file-select="uploadFile($files)" /&gt; &lt;/div&gt; </code></pre> <p>And the javascript:</p> <pre><code>// define the app, include the file upload dependency var app = angular.module('MyApp', ['ng', 'angularFileUpload']); // controller to handle the file upload event app.controller('FileUploadController', function ($scope, $rootScope, FileUploadService) { var service = FileUploadService; /** * Handler to upload a new file to the server. */ $scope.uploadFile = function ($files) { var $file = $files[0]; service.uploadFile($file, function (error) { if (error) { alert('There was a problem uploading the file.'); } // handle successfully-uploaded file }) } }); // services should interact with the outside world app.factory('FileUploadService', function ($http) { var api = { uploadFile: function (file, callback) { $http.uploadFile({ url: '/some/remote/end/point/', file: file }).progress(function(event) { console.log('percent: ' + parseInt(100.0 * event.loaded / event.total)); }).error(function (data, status, headers, config) { console.error('Error uploading file') callback(status); }).then(function(data, status, headers, config) { callback(null); }); } } return api; }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload