Identify which Flow.js / ng-flow input (flow-btn) was used to upload a file

Question

I have multiple flow-btn elements on my page. There is a list of items that the user can upload single files directly in to (individually) or they can choose to upload multiple files which will automatically populate the list. Everything is inside a flow-init.

A bit like this pseudo-code example:

<div flow-init>
    <div flow-btn>Upload multiple images to fill the list</div>
    <h3>The list</h3>
    <ul>
        <li ng-repeat="item in items">
            <div flow-btn flow-single-file>Upload an image for this item</div>
            <img flow-img="item.flowFile">
        </li>
    </ul>
 </div>

I need to identify which flow-btn was used within the list so that I can display the uploaded image thumbnail at the correct point. Basically I think I want access to the item from a flow event.

Note: The list loop data is defined by other data, so I can't just loop through $flow.files to create my list.

How can I do this?

Should I create a new flow-init instance for each loop item? Overkill?

Edit: Alternatively, perhaps I can open the multiple flow-btn from my controller programmatically rather than having a flow-btn for each item?? In which case I could stash the current item in the controller.

rafal2228 · Accepted Answer · 2015-08-25T11:01:56.150

Edit. 08.2015 I have checked this once again under firefox and input element appears to be hidden not inside event.srcElement, but in event.originalTarget. I have updated code and plnkr.

Well, as you probably know ng-flow provides events. To those events you can pass your functions and inject them with $event object, which has reference to specific button you have clicked. In your case you could listen for flow-files-submitted and based on $event.srcElement do appropriate actions like this:

HTML

<div flow-init flow-files-submitted='handleUpload($files, $event, $flow)'>
     <div flow-btn>Upload multiple images to fill the list</div>
     <h3>The list</h3>
     <ul>
        <li ng-repeat="item in items">
            <div flow-btn flow-single-file>Upload an image for this item</div>
            <img flow-img="item.photo" ng-if='item.photo'>
        </li>
    </ul>
</div>

JS

$scope.handleUpload =  function($files, $event, $flow) {
 if(($event.srcElement !== undefined)&&($event.srcElement !== null))
  var input = angular.element($event.srcElement)
 else
  var input = angular.element($event.originalTarget)
 if (input.scope().item) {
  if(input.scope().item.photo) {
    input.scope().item.photo.cancel();
  }
  input.scope().item.photo = $files[0];
 } else {
   for(var i = 0; i < $files.length; i++) {
     $scope.items.push({photo: $files[i]});
   }
 }
};

Check out this Plunker for solution to your problem

Identify which Flow.js / ng-flow input (flow-btn) was used to upload a file

1 Answers1