danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.6k forks source link

How to make in ng-repeat #2144

Open aydcery opened 3 years ago

aydcery commented 3 years ago

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