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);
})
};
}]);
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
