I'm trying to use ng-flow to use an image in javascript to send it to a backend server using a RPC call. The problem is that I follow the tutorial that they have in his page , but I don't find how can access to image in a JavaScript controller inside AngularJS app.
I'm very novice still in Angular and maybe this problem isn't a big problem but I don't found the way to do this.
The code that I have is very simple, a simple html code:
<div class="container" flow-init
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
flow-files-submitted="$flow.upload()">
<h1>flow image example</h1>
<hr class="soften"/>
<div>
<div class="thumbnail" ng-hide="$flow.files.length">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="thumbnail" ng-show="$flow.files.length">
<img flow-img="$flow.files[0]" />
<h2>{{$flow.files[0].name}}</h2>
</div>
<div>
<span class="uk-button" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Select image</span>
<a href="#" class="btn" ng-show="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Change</a>
<a href="#" class="btn btn-danger" ng-show="$flow.files.length" ng-click="$flow.cancel()"> Remove </a>
<span class="uk-button" flow-btn>Upload File</span>
</div>
<p>
Only PNG,GIF,JPG files allowed.
</p>
</div>
</div>
And the factory that ng-flow need is:
routerApp.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true
};
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
}]);
And I have too the code to the controller to this page. I tried to access to image but I don't know how do this.
Any idea?
If you know any way to do this with other tool or know a good tutorial, I really would like to know.
Thanks fo all.