Вопрос:

Cannot upload two separate images under one ng-flow Application

angularjs image file-upload ng-flow

200 просмотра

1 ответ

304 Репутация автора

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.

enter image description here

<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);
    });
Автор: tarekahf Источник Размещён: 22.08.2016 09:33

Ответы (1)


0 плюса

1035 Репутация автора

Problem is right now you have only one flow-init on body element.

This means both drop areas you have inside body refer to same $flow object ( created by flow-init directive).

So, since there is only one $flow object, though you have two different

<img style="max-height:100%" flow-img="$flow.files[0]" />

to 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

<div>
    <h4>Appraiser Signature </h4>
    <div ng-controller="appraiserSignature" flow-init 
                     flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
                     flow-files-submitted="$flow.upload()">
        <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>

SupervisorSignature

<div id="app2">
    <div>
        test scope {{$scope.test}}
        <h4>Supervisor Signature</h4>
        <div ng-controller="supervisorSignature" 
                  flow-init 
                  flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" 
                  flow-files-submitted="$flow.upload()>
                <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>
         </div>
                <p>
                  Only PNG,GIF,JPG files allowed.<br>
                </p>
        </div>
</div>

Complete HTML

<body ng-app="app" flow-prevent-drop>
    <div class="container">
        <h1>flow image example</h1>
        <hr class="soften" />
        <div class="signature-container">
            <div>
                <h4>Appraiser Signature </h4>
                <div ng-controller="appraiserSignature" flow-init flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">
                    <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 ng-controller="supervisorSignature" flow-init flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()>
                <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>
                </div>
                <p>
                  Only PNG,GIF,JPG files allowed.<br>
                </p>
            </div>
        </div>  
    </div>
</div>
</body>

Note: I have added supervisorSignature controller in second drop area.

Hope this helps.

Автор: Ravi Teja Размещён: 29.09.2016 06:08
Вопросы из категории :
32x32