Update ngModel on callback from FineUploader in Angular.js

Question

I'm new to Angular.js and I'm trying to do an AJAX post of a file through the FineUploader library. I've tried to modify a directive I found on github with some other code but I can't seem to be able to get the returned value back to the model.

My HTML code is something along the lines of

  <div ng-controller="Analysis"> 
    <div ng-model="analysis" fine-uploader upload-destination="upload" upload-extensions="model"></div>
  </div>

With a straightforward controller

function Analysis($scope){
    $scope.analysis = [];
}

The trick however is the directive

angular.module('cliniccio.directives', []).
  directive('fineUploader', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function($scope, element, attributes, ngModel) {
      var uploader = new qq.FineUploader({
        element: element[0],
        request: {
          endpoint: attributes.uploadDestination,
        },
        validation: {
          allowedExtensions: attributes.uploadExtensions.split(',')
        },
        text: {
            uploadButton: '<i class="icon-upload icon-white"></i> Upload File'
        },
        template: '<div class="qq-uploader">' +
                    '<pre class="qq-upload-drop-area"><span>{dragZoneText}</span></pre>' +
                    '<div class="qq-upload-button btn btn-info" style="width:auto;">{uploadButtonText}</div>' +
                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span></span>' +
                    '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                  '</div>',
        classes: {
          success: 'alert alert-success',
          fail: 'alert alert-error'
        },
        callbacks: {
          onComplete: function(id, fileName, responseJSON) {
            console.log(ngModel);
            ngModel.$modelValue.push(responseJSON);
          }
        }
      });
    }
  }});

Notice the onComplete callback which should push the model value. However the debug output

file: {{analysis | json}}

Remains empty. Note that I have verified that the server does indeed sent the expected json back. It seems that the name of the ngModel is undefined.

I've tried various combinations, but I've come to conclude that this might not be the proper way.

Ben Lesh · Accepted Answer · 2013-01-24 21:57:11Z

3

I would try this in your callback:

onComplete: function(id, fileName, responseJSON) {
   //duplicate the previous view value.
   var copy = angular.copy(ngModel.$viewValue);

   //add the new objects
   copy.push(responseJSON);

   //update the model and run form validation.
   ngModel.$setViewValue(copy);

   //queue a digest.
   scope.$apply();
}

I have no way to try this without a fiddle, but it should work.

answered Jan 24, 2013 at 21:57

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JoelKuiper Over a year ago

This worked! However I'm not quite sure why, is there any documentation on why this works and simply setting the modelValue doesn't?

Ben Lesh Over a year ago

There's very little documentation on this, I'm afraid... a while back I was curious and looked at the code behind something else. $setViewValue() does the work of checking values, runs all formatters (which are commonly used for validation) and setting things like $viewValue, $modelValue, $dirty, etc. All of the documentation on it is on the ngModelController API docs

Mark Rajcok Over a year ago

$setViewValue() actually calls the $parsers (not the $formatters) - I've confused the two before myself. (Angular source code for the curious). @JoelKuiper, here is a google group post by "Peter BD" (SO name) that explains ngModelController better than the API documentation, IMO.

Ben Lesh Over a year ago

According to the documentation I linked above: "It internally calls all formatters and if resulted value is valid, updates the model and calls all registered change listeners." ... I think it does both. It triggers an awful lot of stuff in there.

Mark Rajcok · Accepted Answer · 2013-01-24 21:42:46Z

0

Inside your callback try this instead:

onComplete: function(...) {
    scope.analysis = responseJSON;
    scope.$apply();
}

Since your directive is not creating an isolate scope, your scope variable in your linking function should have access to all of the $scope properties that your controller has access to.

Since FineUploader is calling callbacks "outside of Angular", you need to call $apply to tell Angular that something has changed.

answered Jan 24, 2013 at 21:42

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

1 Comment

Ben Lesh Over a year ago

It would work, but that would leave the directive dependent on knowing what's in the parent scope.

Collectives™ on Stack Overflow

Update ngModel on callback from FineUploader in Angular.js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related