Skip to content

How to make in ng-repeat #2144

Open
Open
@aydcery

Description

@aydcery

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions