FAQ

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?

{FileItem}created when a file is added to queue. In this moment uploader options will be copied to him. You can use uploader callback or item callback:

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

See #225

3. I need custom options. Are there any?

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://github.com/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

8. I have error "Uploader must be an instance of FileUploader". How fix it?

See #183

9. My files aren't showing up in the Simple example. What can I do?

Make sure that the /uploads directory has the correct permissions. In Linux the Octal 0777 will work.

10. If I Limited Queue to 1, It has some terrible problem

https://github.com/nervgh/angular-file-upload/issues/649#issuecomment-230588745

11. Performance issues

https://github.com/nervgh/angular-file-upload/issues/687