ng-file-upload
ng-file-upload copied to clipboard
How to make in ng-repeat
I am trying to add ng-file-upload in the angular repeater but I couldn't make. I am selecting and image for first repeater field and it's working fine showing percent and image name . but after that when I add new repeater field and I can still see same information of previous uploaded image. I want to upload another image in second repeater field . is it possible to make thank you very much for answers.
Here html:
<div ng-controller="MyCtrl">
<div
ui-sortable="sortableOptions"
class="inputArea"
ng-model="inputs"
>
<div ng-repeat="input in inputs">
<input
type="text"
ng-model="input.choices"
name="choices[]"
/>
<div
ngf-select="uploadFiles($file, $invalidFiles)"
accept="image/*"
ngf-max-height="1000"
ngf-max-size="1MB"
>
Select File
</div>
{{f.name}} {{errFile.name}} {{errFile.$error}}
{{errFile.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div
style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"
></div>
</span>
{{errorMsg}}
</div>
<div class="inleft">
<div ng-click="removeInput($index)">Remove</div>
<div class="inmove myHandle">cccc</div>
</div>
</div>
<button ng-click="addInput()">add input</button>
</div>
and here js code:
var app = angular.module('plunker', ['ui.sortable', 'ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) {
$scope.$watch('files', function () {
$scope.upload($scope.files);
});
$scope.inputs = [{
choices: '',
}];
$scope.addInput = function() {
$scope.inputs.push({
choices: ''
});
}
$scope.uploadFiles = function(file, errFiles) {
$scope.f = file;
$scope.errFile = errFiles && errFiles[0];
if (file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {file: file}
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}
}
$scope.removeInput = function(index) {
$scope.inputs.splice(index, 1);
}
$scope.sortableOptions = {
handle: 'div .myHandle',
axis: 'y'
}
}]);
and here the plunker : https://plnkr.co/edit/7ECfPhAEI78Sgrh1