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?
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()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With