angular-upload, new method parameter dissapears

Question

Hey I'm trying to do an extension to https://github.com/leon/angular-upload
I need to do some client side validation before uploading (a preliminary check on the file so that I can make sure a size + width + height of picture is matching my requirements.

But when I'm sending my options to the method, options will remain undefined in my controller.scope.UploadTest(options)

New code in the directive:

angular.module('lr.upload.directives').directive('uploadButton', [
    'upload',
    function(upload) {
        return {
            restrict: 'EA',
            scope: {
                data: '=?data',
                url: '@',
                param: '@',
                method: '@',
                onUpload: '&',
                onSuccess: '&',
                onUploadTest: '&',//added this to test for upload
                onError: '&',
                onComplete: '&'
            },
            link: function(scope, element, attr) {
                var el = angular.element(element);
                var fileInput = angular.element('<input type="file" />');
                el.append(fileInput);
                fileInput.on('change', function uploadButtonFileInputChange() {
                    if (fileInput[0].files && fileInput[0].files.length === 0) {
                        return;
                    }
                    var options = {
                        url: scope.url,
                        method: scope.method || 'POST',
                        forceIFrameUpload: scope.$eval(attr.forceIframeUpload) || false,
                        data: scope.data || {}
                    };
                    options.data[scope.param || 'file'] = fileInput;
                    scope.$apply(function() {
                        scope.onUpload({files: fileInput[0].files});
                    });
                    var uploadTest = true; //make true if function not exists

                    if (typeof scope.onUploadTest === "function") {
                        var functionCheck = scope.onUploadTest(options); //Here my options is fine
                        if (functionCheck === true || functionCheck === false) {
                            uploadTest = functionCheck;
                        }
                    }
                    if (uploadTest) {
                        upload(options).then(function(response) {
                            scope.onSuccess({response: response});
                            scope.onComplete({response: response});
                        }, function(response) {
                            scope.onError({response: response});
                            scope.onComplete({response: response});
                        });
                    } else {
                            scope.onError({response: "UploadTest Failed"});
                            scope.onComplete({response: "UploadTest Failed"});
                    }
                });
            }
        };
    }
]);

The Controller:

$scope.onUploadTest = function(options) {
    console.log(options);
    return false;
};

HTML:

<div class="btn btn-primary btn-upload" upload-button url="{{url}}" accept="image/*" multiple="false"
on-success="onSuccess(response)" on-error="onError(response)" on-upload-test="onUploadTest(options)" >Upload nyt billede</div>

score 0 · Answer 1 · answered Sep 08 '14 at 12:53

0

The best convention to do this is on your backend and send back an error response to the frontend, it's not possible to parse a file with angular yet.

answered Sep 08 '14 at 12:53

Pepijn

1,204
1
11
25

I don't need angular to parse the file, I can do that with FileReader, all I need it my parameter sent to my test method. And i disagree that the best convention is so. The best convention is having it both places. On client side to ensure that unwanted data transfer is not being done and backend to detect spoofers – Anders Metnik Sep 08 '14 at 12:57
Okay try to remove the onUploadTest attribute from your HTML (it makes no sense to have it there), because options is not on the scope it will be undefined in the HTML. – Pepijn Sep 08 '14 at 15:43

angular-upload, new method parameter dissapears

1 Answers1