samples/image/index.html
<!DOCTYPE html>
<html ng-app="app" flow-init
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
flow-files-submitted="$flow.upload()">
<head>
<title>Image</title>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../dist/ng-flow-standalone.js"></script>
<script src="app.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
rel="stylesheet"/>
<style>
.thumbnail {
max-width: 200px; max-height: 150px; line-height: 20px; margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<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]" />
</div>
<div>
<a href="#" class="btn" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Select image</a>
<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>
</div>
<p>
Only PNG,GIF,JPG files allowed.
</p>
</div>
</div>
</body>
</html>