ng-flow.js, how to display responsed JSON data in HTML or controller

Question

I'm using ng-flow, script named ng-flow-standalone.js from here: https://github.com/flowjs/ng-flow

My concept is when user adding a new item, only upload field is showing and once the photo is uploaded the additional form fields will be showing up e.g. Title, Description.

In code, app will create product_id, image_id and then saving the file. Once saving process is complete, it will return product_id, image_id and etc in json format. HTML, hidden form fields will be displayed once product_id is defined.

I see JSON responded by the server in console log but do not know how to display it in HTML or angular controller. I can't see this how-to in the docs and demo. Can anyone help me?

Thanks

Example code:

..
<script src="/assets/js/ng-flow-standalone.js"></script>
..
<div class="row">
  <div class="col-md-4" flow-init="{target:'upload_image.json'}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Photos</h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div ng-repeat="file in $flow.files">
            <div class="col-md-3">
              <div class="thumbnail">
                <img flow-img="file" />
              </div>
            </div>
          </div>
        </div>
        <div>
          <span class="btn btn-primary" flow-btn flow-files-submitted="$flow.upload()">Upload</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8" ng-show="{{ xxx.product_id }}">
    <form class="panel panel-default form-horizontal">
      <div class="panel-heading">
        <h3 class="panel-title">Infomation</h3>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label class="col-sm-2 control-label">Title</label>
          <div class="col-sm-6">
            <input name="name" type="text" class="form-control" required>
          </div>
          <div class="col-sm-4"></div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Description</label>
          <div class="col-sm-6">
            <textarea class="form-control" rows="3" required></textarea>
          </div>
          <div class="col-sm-4">Write useful info e.g. appearance, purpose and recommendations</div>
        </div>
      </div>
      <div class="panel-footer">
        <input type="hidden" name="product" value="{{ xxx.product_id }}">
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
    </form>
  </div>
</div>

Notice at "xxx.product_id", xxx is what I don't know, may be somehting like $flow.fileSuccess.message.product_id.

SOLUTIONS: Using callback method in Controller as recommended by Aidas

$scope.$on('flow::filesSubmitted', function (event, $flow, flowFile)
  products.save($scope.product)
  .$promise.then(function(result) {
    $scope.product = result;
    if ($scope.product.id) {
      $flow.opts.target = apiUrl + '/products/' + $scope.product.id + '/images';
      $flow.upload();
    }
  });
});

Answer 1

You can't access success message directly, but you can access it from callback.

flow-file-success=" ... properties '$file', '$message' can be accessed ... "

In HTML:

<div flow-file-success="success($message)">...

success - should be a method defined in your controller. Assign this message to the scope, or use it in any other way.