flowjs / ng-flow

Flow.js html5 file upload extension on angular.js framework
http://flowjs.github.io/ng-flow/
MIT License
1.38k stars 303 forks source link

TypeError: this.fileObj.file[func] is not a function #326

Closed francisrod01 closed 7 years ago

francisrod01 commented 7 years ago

I have a problem to implement a upload file in controller assuming new Flow(opts) as Flow object to upload after.

I follow the ng-flow documentation:

My html init code in form:

<div flow-init  flow-files-submitted="controller.uploadFile($event, $files, $flow, 'profile')">

My controller is below. Assume that controller is the alias to controller.

       /**
         * Upload file asynchronously.
         *
         * @param event
         * @param files
         * @param $flow
         * @param itemType
         */
        vm.uploadFile = function (event, files, $flow, itemType) {
            console.log('=== Estoy acá en uploadFile...');

            var flowFile = files[0];
            console.log('flowFile output:');
            console.log(flowFile);

            var _added = !!{png: 1, gif: 1, jpg: 1, jpeg: 1}[flowFile.getExtension()];

            console.log('file extensions is:');
            console.log(_added);

            if (!_added)
                return null;

            vm.dropEnabled = false;

            var _target = '/api/profile/upload';

            var fileDefaults = {
                singleFile: true,
                testChunks: false,
                target: _target
            };

            var flow = new Flow(fileDefaults);
            flow.addFile(flowFile);

            console.log('new Flow() output:');
            console.log(flow);
            console.log(flow.upload()); // # <-- error here.

...

Error output:

TypeError: this.fileObj.file[func] is not a function
    at FlowChunk.send (ng-flow-standalone.js:1228)
    at ng-flow-standalone.js:306
    at each (ng-flow-standalone.js:1422)
    at ng-flow-standalone.js:304
    at each (ng-flow-standalone.js:1422)
    at Flow.uploadNextChunk (ng-flow-standalone.js:302)
    at Flow.upload (ng-flow-standalone.js:448)
    at ProductsController.vm.uploadFile (ProductsController.js:279)
    at fn (eval at compile (angular.js:15358), <anonymous>:4:426)
    at ChildScope.$eval (angular.js:18161)

I didn't what's happening, because the documentation don't let met more information about errors.

francisrod01 commented 7 years ago

This solution isn't easy but I solved!

First, I solved the problem of changed defaults as #61 issue.

Second, I set query parameters in uploadFile method as below:

...
$flow.opts.query = { foo:bar };

$scope.$emit('flow::filesSubmitted', event, $flow, files);

and I catch this event as documentation recommended and there, you will use $flow.upload() to send the file to the web server.

That's it, I learn best practices of ng-flow but the documentation is confuse about steps to follow.