ng-flow sample

ng-flow sample

by Tarek Faham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-flow/2.7.4/ng-flow-standalone.js"></script>
<body ng-app="app" >
<div ng-controller="myController as vm"  >
  <span>Check if it is working: {{testScope}}</span>
  <div flow-init="{singleFile:true}" flow-file-added="someHandlerMethod($file, $event, $flow )" flow-name="vm.flow1">
    <div  flow-prevent-drop >
      <div class="thumbnail" ng-show="vm.flow1.files.length">
        <img flow-img="vm.flow1.files[0]">
      </div>
      <div >
        <span class="btn btn-primary" ng-show="!vm.flow1.files.length" flow-btn>Select Image</span>
        <span class="btn btn-info" ng-show="vm.flow1.files.length" flow-btn>Change</span>
        <span class="btn btn-danger" ng-show="vm.flow1.files.length" ng-click="vm.flow1.cancel()">Remove</span>
      </div>
    </div>
  </div>
  <hr>
  <div flow-init="{singleFile:true}" flow-file-added="someHandlerMethod2($file, $event, $flow )" flow-name="vm.flow2">
    <div  flow-prevent-drop >
      <div class="thumbnail" ng-show="vm.flow2.files.length">
        <img flow-img="vm.flow2.files[0]">
      </div>
      <div >
        <span class="btn btn-primary" ng-show="!vm.flow2.files.length" flow-btn>Select Image</span>
        <span class="btn btn-info" ng-show="vm.flow2.files.length" flow-btn>Change</span>
        <span class="btn btn-danger" ng-show="vm.flow2.files.length" ng-click="vm.flow2.cancel()">Remove</span>
      </div>
    </div>
  </div>
  
</div>

</body>

CSS

.features {
    float: right;
    width: 300px;
    padding-left: 20px;
}
.features .heading {
    font-size: 14px;
    font-weight: bold;
}

.drop {
    padding: 15px;
    border: 2px #f1f1f1 dashed;
    border-radius: 5px;
    line-height: 34px;
}
.drop.drag-over {
    background: #5CB85C;
    color: #fff
}
.transfer-box {
    margin-bottom: 5px;
}
.transfer-box .progress {
    margin-bottom: 0;
}

.thumbnail {
    line-height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    word-break: normal;
}
.thumbnail img {
    max-width: 200px;
    max-height: 150px;
}

.gallery-box {
    width: 200px;
    padding: 5px;
    margin: 7px;
    float: left;
    min-height: 200px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.gallery-box .progress {
    margin-bottom: 0;
}
.gallery-box .thumbnail {
    height: 188px;
    width: 188px;
}
.gallery-box .title {
    height: 22px;
    overflow: hidden;
    display: block;
}

JavaScript

/*global angular */
'use strict';

/**
 * The main app module
 * @name app
 * @type {angular.Module}
 */
//var app = angular.module('app', ['flow'])
var app = angular.module('app', ['flow'])
  .config(['flowFactoryProvider', function (flowFactoryProvider) {
    flowFactoryProvider.defaults = {
      target: '',
      permanentErrors: [500, 501],
      maxChunkRetries: 1,
      chunkRetryInterval: 5000,
      simultaneousUploads: 1
    };
    flowFactoryProvider.on('catchAll', function (event) {
      console.log('catchAll', arguments);
    });
    // Can be used with different implementations of Flow.js
    //flowFactoryProvider.factory = fustyFlowFactory;
  }]);
 
 app.controller("myController", function($scope){
 	var vm = this;
  vm.flow1 = {};
  vm.flow2 = {};
  $scope.obj = {};
  $scope.obj2 = {};
 	$scope.testScope = "It is working";
  $scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
  	debugger;
  	//event.preventDefault();//prevent file from uploading
	});
  $scope.someHandlerMethod = function (file, event, flow) {
  	//debugger;
  }
  $scope.someHandlerMethod2 = function (file, event, flow) {
  	//debugger;
  }  
});