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

No receiving 'flow::XXXXXXXX' notifications on Angular 1.2.28 #169

Open jlcampana opened 9 years ago

jlcampana commented 9 years ago

Hi, I'm using angular ver 1.2.28 with ui-route.

The example of how to receive notifications in the controller is not working because the $flow variable is not on the $scope of the controller, so you cannot receive them:

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
            // event.preventDefault(); //prevent file from uploading
            console.log('pepepepe', $flow, flowFile);
}); 

Instead of that, if you emit your notifications inside the $rootScope, the notification will arrive to the controller (by using $rootScope.$on('flow::XXXXXX....)


HTML

<div flow-init flow-object="flowObject"  flow-files-submitted="doUpload()">
  <span flow-btn>
    Upload...
  </span>
</div>

Controller

module.controller('BLAHBLAHBLAHController', function (flowFactory,  .... {

$scope.flowObject = flowFactory.create({
            target: getUploadURL() //this function will assign the correct url depending of the state
});

//The following function works because I put a hack on ng-flow standalone file
$rootScope.$on('flow::fileAdded', function (event, $flow, flowFile) {
            // event.preventDefault(); //prevent file from uploading
            console.log('pepepepe', $flow, flowFile);
});

$scope.doUpload = function () {
            $scope.flowObject.upload();
};

The hack Perform the broadcast over $scope.$parent instead $scope:

angular.module('flow.init', ['flow.provider'])
  .controller('flowCtrl', ['$scope', '$attrs', '$parse', 'flowFactory',
  function ($scope, $attrs, $parse, flowFactory) {

    var options = angular.extend({}, $scope.$eval($attrs.flowInit));

    // use existing flow object or create a new one
    var flow  = $scope.$eval($attrs.flowObject) || flowFactory.create(options);

    var catchAllHandler = function(eventName){
      var args = Array.prototype.slice.call(arguments);
      args.shift();
      var event = $scope.$parent.$broadcast.apply($scope.$parent, ['flow::' + eventName, flow].concat(args));
      if ({
        'progress':1, 'filesSubmitted':1, 'fileSuccess': 1, 'fileError': 1, 'complete': 1
      }[eventName]) {
        $scope.$parent.$apply();
      }
      if (event.defaultPrevented) {
        return false;
      }
    };
merlinschumacher commented 8 years ago

I second that issue. The hack solves the problem. I use angular 1.5.0 and ng-flow 2.7.1

evilaliv3 commented 8 years ago

@jlcampana / @merlinschumacher so it's simply the example code that should be fixed you are identifying that some changes may be valuable in the library? in such a case pull requests are welcome! thanks