Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to make in ng-repeat #2144

Open
aydcery opened this issue Jan 30, 2021 · 0 comments
Open

How to make in ng-repeat #2144

aydcery opened this issue Jan 30, 2021 · 0 comments

Comments

@aydcery
Copy link

aydcery commented Jan 30, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant