angular-upload

v1.0.13

Published

2 years ago

AngularJS Upload, Handle your uploading with style

Downloads

1,988

0High
0Medium
0Low

leon

angular upload files iframe fileupload directive

Angular Upload

Upload files using FormData, fall back to iframe upload when FormData isn't supported

Works in all browsers
Lightweight
No dependency on jQuery

Example

<div
  class="btn btn-primary btn-upload"
  upload-button
  url="/upload"
  on-success="onSuccess(response)"
>Upload</div>

Install

Install via bower

bower install --save angular-upload

Add the module to your app dependencies and include it in your page

angular.module('app', [
  'lr.upload'
]);

<script src='bower_components/angular-upload/angular-upload.min.js'></script>

and to your less/css if you want the upload button

@import "bower_components/angular-upload/src/directives/btnUpload.less"; /* or .min.css */

And you are good to go!

Documentation over parameters

Upload button

The upload button masks the normal file input and makes it look like a button

<div
  class="btn btn-primary btn-upload"
  upload-button

  // Mandatory, the url of the backend that is going to handle the upload
  url="/upload"

  // Optional, file param name for upload
  param="file"

  // Optional, object to send as form data with the upload
  data="formData"

  // Optional, comma separated list or array of allowed mimetypes, defaults to allowing all types
  accept="{{acceptTypes}}"

  // Optional, Allow selecting multiple files, defaults to false
  multiple="{{allowMultiple}}"

  // Optional, force all uploads through the iframe solution, defaults to false and should normally not be included
  force-iframe-upload="{{forceIframeUpload}}"

  // Optional, make file input required and add ng-invalid-required if required is set to true on the input button
  required="true|false"

  on-upload="onUpload(files)" // Optional callback when uploading starts
  on-success="onSuccess(response)" // Optional callback
  on-error="onError(response)" // Optional callback
  on-complete="onComplete(response)" // Optional, callback (called on both on-success and on-error)

>Fileupload</div>

Advanced documentation

The upload service that is used behind the scenes in the upload button, can be used in a controller by injecting upload

<body ng-app="app" ng-controller="AppCtrl">
    <input name="myFile" type="file" />
</body>

angular.module('app').controller('AppCtrl', function ($scope, upload) {
  $scope.doUpload = function () {
    upload({
      url: '/upload',
      method: 'POST',
      data: {
        anint: 123,
        aBlob: Blob([1,2,3]), // Only works in newer browsers
        aFile: $scope.myFile, // a jqLite type="file" element, upload() will extract all the files from the input and put them into the FormData object before sending.
      }
    }).then(
      function (response) {
        console.log(response.data); // will output whatever you choose to return from the server on a successful upload
      },
      function (response) {
          console.error(response); //  Will return if status code is above 200 and lower than 300, same as $http
      }
    );
  }
});

Build it yourself!

angular-upload is built with grunt and has a express backend for testing.

Start by installing npm if you don't have it already

via homebrew or homepage (http://nodejs.org/download/)

brew install nodejs

then

npm install -g grunt-cli karma-cli

then from within angular-upload

npm install && bower install

then you can start the testserver up with

grunt webserver

and you can access it through http://localhost:9001 and test the uploader

To run the tests

grunt test

or run in autotest mode

grunt autotest

And when you're done minify it

grunt package

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme