Skip to content
Alex edited this page Aug 17, 2014 · 15 revisions

1. How do I deal with Cross Site Request Forgery protection?

See this issue: #40

For example, in Ruby on Rails, add an additional header, and use this method for verifying XSRF:

var csrf_token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

var uploader = $scope.uploader = new FileUploader({
    // your code here...
    headers : {
        'X-CSRF-TOKEN': csrf_token // X-CSRF-TOKEN is used for Ruby on Rails Tokens
    },
    //...
});

2. How to update FileItem options before uploading?

You can use uploader callback or item callback:

uploader.onBeforeUploadItem(function(item) {/* your code here */});
// or
item.onBeforeUpload(function() {/* your code here */});

3. I need custom options. Are there they?

Yes. See directives API.

4. "No file chosen" or "Re-add same file"

By default the value property of input element cleared after selection of files if the input have multiple attribute. If you do not clean this property then "change" event will not be fired if you select same file. You can manage this behavior:

  • Using multiple attribute
<!-- will be cleared -->
<input type="file" nv-file-select uploader="{FileUploader}" multiple/>
<!-- won't be cleared -->
<input type="file" nv-file-select uploader="{FileUploader}"/>
  • Override js function
FileUploader.FileSelect.prototype.isEmptyAfterSelection = function() {
    return {Boolean}; // true|false
};

See this function and change handler.

5. How I can modify native methods or add new features to FileUploader?

  • You can modify instance of {FileUploader}. In this case your changes will be applied only for current uploader:
var uploader = new FileUploader();
uploader.yourMethod = function() {/*code here*/};
  • You can extend the prototype of {FileUploader}. In this case your changes will be applied to all instances of {FileUploader}:
.config(['$provide', function($provide) {
    $provide.decorator('FileUploader', ['$delegate', function(FileUploader) {
        // $delegate is FileUploader

        // add new method
        FileUploader.prototype.yourMethod = function() {/*code*/};

        // override default over class ("nv-file-over")
        FileUploader.FileOver.prototype.overClass = 'your-class-name';

        return FileUploader;
    }])
}])
  • You can create own {YourUploader} class using javascript inheritance and the helper function. In this case your changes will be applied to all instances of {YourUploader}:
.factory('YourUploader', ['FileUploader', function(FileUploader) {
    // The inheritance. See https:/nervgh/angular-file-upload/blob/v1.0.2/src/module.js#L686
    FileUploader.inherit(YourUploader, FileUploader);

    function YourUploader(options) {
        YourUploader.super_.apply(this, arguments);
    }

    // create new method
    YourUploader.prototype.yourMethod = function() {/*code*/};

    return YourUploader;
}])

.controller('AppController', ['$scope', 'YourUploader', function($scope, YourUploader) {
    var uploader = $scope.uploader = new YourUploader();
    console.info('uploader', uploader);
}])

6. How can I upload the cropped or resized image?

You need convert preview in Blob object.
See #207, #208

7. How do I add in the queue previously uploaded files?

See #211

Clone this wiki locally