ng-flow upload programmatically

Question

I am currently using ng-flow to perform a file upload. It appears that the default action of selecting a file is to upload immediately. I'd like to override this so that files are selected and only uploaded on button click. Perhaps I am misreading the documentation, but thus far I have the following:

<div flow-init="{target: '/upload'}"
     flow-files-submitted="$flow.upload()"
     flow-file-success="$file.msg = $message">

  <input type="file" flow-btn/>
  Input OR Other element as upload button
  <span class="btn" flow-btn>Upload File</span>

  <table>
    <tr ng-repeat="file in $flow.files">
        <td>{{$index+1}}</td>
        <td>{{file.name}}</td>
        <td>{{file.msg}}</td>
    </tr>
  </table>
</div>

This appears to work and I can see the network request going out. I located flow.js upload file on click and attempted to follow the suggested answer, however $flow was undefined in the respective function.

So, how does one programmatically upload files using ng-flow?

Answer 1

At first, flow-files-submitted event is triggered when user pick a file (misleading name). So when you assign $flow.upload() to it, you make it uploading immediately after file selection.

Second thing is to get $flow object in your controller. Two ways comes to my mind:

A. As instruction say, you have to use flow-name attribute:

<div flow-init flow-name="obj.flow">

Then you have reference to $flow in yours $scope.obj.flow property and you can use $scope.obj.flow.upload() method anywhere in your controller.

B. Put your "Upload" button inside flow directive block (as a descendant of element with flow-init attribute) and use $flow property of directive scope as a parameter in ng-click, for example:

<button type="button" ng-click="myUploadMedhot($flow)">Upload</button>

and inside myUploadMethod(param) just call param.upload().