multiple image uploads on same page

[JBD]

Hi

I have a form that shows a list of room types.  I would like to be able to upload multiple pictures for each roomtype on the same page if possible. This below code appears to work for just the first one, but when it shows the image thumbnail after selecting an image to upload, it fills each one with the image, only the first one functions like it is supposed to.  How can I do this for multiple images, with multiple controls (dynamically generated) on the same page?  (I am using dust templates as well)  Thanks.

{#Rooms}

   <div ng-app="fileUpload"  ng-controller="UploadCtrl" class="form-group" class="ng-cloak" ng-init="savepathUID = ('{page.items.Route}/{Rooms[$idx].Id}' || 'no-id'); logoUrl = ({@eq key="{Rooms[$idx].Pictures[0]}" value="" } '/images/no-logo.png'{:else}'{Rooms[$idx].Pictures[0]}'{/eq} || ''); savepath = 'lodging'";> 

        <div class="col-md-10">

                <div class="row">

                <ul>

    <li><strong>{Name.invariant}</strong><br />

                    <span ngf-drop="upload($files)" style="cursor:copy;margin-left:15px" ngf-drag-over-class="dragover" ng-model="file" name="file" ngf-pattern="'image/*'"

                                                accept="image/*" ngf-max-size="10MB" ngf-min-height="120" 

                                                ngf-resize="{width: 300, height: 300, quality: .8}" ngf-select="upload($file)">

                    <img ngf-thumbnail="file || {@eq key="logoUrl" value="" } '/images/no-logo.png'{:else}logoUrl{/eq} || '/images/no-logo.png'" ngf-size="{width: 300, height: 300}">

                      <span>Drop or choose image</span>

                      </span>

                      <a href="#" ng-click="remove($event)" ng-show="logoUrl">| delete [x]</a>

                      <input type="hidden" name="Pictures[{$idx}]" class="form-control" ng-value="logoUrl"/>

                      </li>                     

</ul>

                </div>                                    

            </div>

        </div>

{/Rooms}

<script type="text/javascript" src="/js/image-upload/ng-file-upload-all.min.js" type="text/javascript"></script>

<script type="text/javascript" src="/js/room-upload.js" type="text/javascript"></script>

------------------------------------------------------------------------------------------

'use strict';

var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('UploadCtrl', ['$scope', 'Upload', function ($scope, Upload) {

    // upload later on form submit or something similar

    $scope.submit = function() {

      if (form.file.$valid && $scope.file && !$scope.file.$error) {

        $scope.upload($scope.file);

      }

    };

var domain_image_resizer = (datashared !== 'undefined' && datashared.NODE_ENV === 'development') ? '//skinode:3030' : '//images.mydomain.com';

    var images_api_base = '/image-management/upload';

    var base_image_url = '/media';

    $scope.remove = function($event) {

    $event.preventDefault();

    $scope.file = '';

    $scope.logoUrl = '';

    }

    // upload on file select or drop

    $scope.upload = function (file) {

        Upload.upload({

            url: domain_image_resizer + images_api_base,

            data: {file: file, savepath: $scope.savepath + $scope.savepathUID + '/', type: 'room'}

        }).progress(function (evt) {

            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);

            console.log('progress: ' + progressPercentage + '% ');

        }).success(function (data) {

        $scope.logoUrl = domain_image_resizer + base_image_url + '/' + data.file.savepath;

        }).error(function (data, status, headers, config) {

            console.log('error status: ' + status);

        })

    };

}]);

[Sander Elias]

Hi JBD,

First problem I spot is that you probably have multiple ng-app's in your page. That will not help.

For complex problems like this, it's better to build a plunk showcasing your issue, that makes it easier to help you. (use local storage instead of  a backend server to store the uploads..)

Regards

Sander