“Uploader” must be an instance of FileUploader

Question

I referred this: https://github.com/nervgh/angular-file-upload/tree/version-3.0.0-alpha

angular.min.js:14540 TypeError: "Uploader" must be an instance of FileUploader
    at link (http://localhost:8080/services/angular-file-upload.js:1874:24)
    at invokeLinkFn (http://localhost:8080/lib/js/angular.min.js:10445:8)
    at nodeLinkFn (http://localhost:8080/lib/js/angular.min.js:9733:9)
    at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8712:10)
    at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8717:10)
    at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8717:10)
    at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8717:10)
    at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8717:10)
    at publicLinkFn (http://localhost:8080/lib/js/angular.min.js:8567:9)
    at link (http://localhost:8080/lib/js/angular-route.js:1053:5) <input type="file" nv-file-select="" uploader="uploader" multiple="">

Answer 1

try with this

<element ng-if="uploader">
    <input type="file" nv-file-select uploader="uploader" multiple />
</element>

I tested on angular-file-upload v2.3.4 and works fine

Answer 2

FileUploader should be in controllers global scope in order to make an object respective to FileUploader. I made a factory and used it throughout the controller.

Answer 3

This is the js part, this is the service i wrote in these you can pass the FileUploader object and the url along with $scope variable.

tmsApp.service("fileServices", function($http) {

    this.uploadFile = function(FileUploader, $scope, url) {
        var uploader = $scope.uploader = new FileUploader({
            url : url,
        });
        // FILTERS
        uploader.filters.push({
            name : 'customFilter',
            fn : function(item, options) {
                return this.queue.length < 10;
            }
        })
    }

})

This is the .java file

/**
 * 
 * @param file
 * @param projectId
 * @param taskId
 * @comments
 */
public void fileUpload(MultipartFile file, Long projectId, String taskId) {
    if (!file.isEmpty()) {
        try {
            String uploadsDir = location + "/uploads/" + "tenant/"
                    + authUtilService.getLoggedInUsersTenantName()
                    + "/project/" + projectId + "/task/" + taskId + "/";

            if (!new File(uploadsDir).exists()) {
                new File(uploadsDir).mkdirs();
                log.info("Directory Created");
            }
            log.info("realPathtoUploads = {}", uploadsDir);
            String originalFileName = file.getOriginalFilename();
            String filePath = uploadsDir + originalFileName;
            File destination = new File(filePath);
            file.transferTo(destination);

            Task task = taskRepository.findByIdAndTenant(taskId,
                    authUtilService.getLoggedInUsersTenant());
            taskHistoryService.addAuditUtility(TaskAudit.FILE, task,
                    originalFileName);

        } catch (Exception e) {
        }

    } else {
        log.info("File upload Failed!! Try again.....");
    }
}

Answer 4

I was getting this error because I had defined an other $scope.uploader way at the bottom from before I decided to use this library and had forgotten about it...

Was trying everything else out first before noticing, the best ones xD