I am using ng-flow file upload:
https://github.com/flowjs/ng-flow
It seems there is something wrong with my code or there is an issue. My work is based on the basic image sample provided with the download.
I am trying to create a page that allows to upload two images using one application and two controllers. Each image is a signature image, one for the appraiser and the other for the supervisor.
Not matter what I try, it is not working.
Each of the the two images have one separate drop area, and they are treated like one image. Every time I drop an image to any of the elements, the file preview will be the same for both.
I tried to use one controller, and also two controllers, and the result is the same. One image will show on two elements.
See snapshots and code samples below.
Appreciate your help.
<html >
<head>
<meta charset="ISO-8859-1">
<title>Signature Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../../js/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"/>
<link href="./style.css" rel="stylesheet"/>
<style>
</style>
</head>
<body ng-app="app" flow-prevent-drop
flow-init
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
flow-files-submitted="$flow.upload()">
<div class="container" >
<h1>flow image example</h1>
<hr class="soften"/>
<div class="signature-container" >
<div >
<div ng-controller="appraiserSignature" flow-file-added="someHandlerMethod($file, $event, $flow)">
<h4>Appraiser Signature </h4>
<div class="digital-signature" ng-hide="$flow.files.length"
flow-drop flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img id="emptySign" src="images/sign-here-image.jpg" />
</div>
<div class="digital-signature" flow-drop ng-show="$flow.files.length"
flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img style="max-height:100%" 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>
<div id="app2">
<div>
test scope {{$scope.test}}
<h4>Supervisor Signature</h4>
<div class="digital-signature" ng-hide="$flow.files.length"
flow-drop flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img src="images/sign-here-image.jpg" />
</div>
<div class="digital-signature" flow-drop ng-show="$flow.files.length"
flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img style="max-height:100%" 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.<br>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true,
};
console.log('app1 config', flowFactoryProvider);
console.log('app1 config - flowFactoryProvider.opts', flowFactoryProvider.opts);
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
// Can be used with different implementations of Flow.js
// flowFactoryProvider.factory = fustyFlowFactory;
}]);
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
};
app.controller('appraiserSignature',
function ($scope) {
$scope.someHandlerMethod = function ($file, $event) {
console.log('someHandlerMethod', $event.target.parentNode);
}
$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
console.log('flow::fileAdded - appraiser signature', event, $flow, flowFile);
console.log('event.target = ', event.target)
//flowFile.pause();
//event.preventDefault();//prevent file from uploading
//cancelBubble(event);
//$flow.upload = null;
//$flow.preventEvent(event);
//console.log("flowFile.pause() executed.");
});
console.log('in appraiserSignature controller');
//debugger;
console.log('appraiser Signature controller', $scope);
});
Problem is right now you have only one
flow-initonbodyelement.This means both drop areas you have inside
bodyrefer to same$flowobject ( created byflow-initdirective).So, since there is only one
$flowobject, though you have two differentto show two different images, both
$flow.files[0]will always refer to same location.To get rid of that you got to have two different
flow-init, one for each drop area.Appraiser Signature
SupervisorSignature
Complete HTML
Note: I have added
supervisorSignaturecontroller in second drop area.Hope this helps.