I have several flow-btn elements scattered throughout my webpage. Users can either upload individual files directly to a list of items or choose to upload multiple files that will automatically populate the list. This functionality is contained within a flow-init.
Here's an example pseudo-code snippet:
<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 am trying to determine which specific flow-btn was used within the list in order to display the uploaded image thumbnail in the right place. Essentially, I want access to the item from a flow event.
Please note: The loop data for the list is based on other information, so I cannot simply cycle through $flow.files to generate my list.
What would be the best way to achieve this?
Should I create a new separate flow-init instance for each item in the loop? Would this be excessive?
Edit: Alternatively, would it be possible to programmatically trigger the multiple flow-btn from my controller instead of having one for each item? In such a case, I could store the current item in the controller.