how to get cloned div data in angularjs

Question

I am new to angularjs,i am trying to clone a div and get data of the cloned div,i successfully cloned the div but i find it difficult to get data(file) from the cloned div.please help me to sort it out.

html

<div class="form-group last">                           
    <div ng-repeat="input in inputs track by $index" class="col-md-3">
        <div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden" value="" name="">
            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                <img src="img/catalog-no-image.png" alt="">
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px;"></div>
            <div>
                <span class="btn btn-white btn-file">
                    <span class="fileupload-new btn-sm"><i class="fa fa-paper-clip"></i> Select image</span>
                    <span class="fileupload-exists btn-sm"><i class="fa fa-undo"></i> Change</span>
                    <input type="file" class="default" name="image_file" file-model="myFile" custom-on-change="loadFileData($file)" multiple="true">
                </span>
                <button class="btn btn-danger btn-sm fileupload-exists" id="removeImage" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</button>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <span class="label label-danger">NOTE!</span>
        <span>
        Attached image thumbnail is
        supported in Latest Firefox, Chrome, Opera,
        Safari and Internet Explorer 10 only
        </span>
    </div>
</div>
<div class="col-md-12">
    <button class="btn btn-success" type="button" id="add" ng-click="add()">Add</button>
</div>

app.js

.controller('productUploadCtrl', ['$scope', 'fileUpload', '$routeParams', '$http', '$compile', 'toastr', function($scope, fileUpload, $routeParams, $http, $compile, toastr) {
    $('#group_selection').select2();

    $scope.uploadFile = function(clear, pattern) {
        $scope.myFile = [];
        $scope.loadFileData = function(files) {
            console.log(files);
            console.log($scope.fileModel);
            $scope.files = files;
        };
        var file = $scope.myFile;
        console.log(file);
        //alert(file);
        var id_product = $routeParams.productId;
        var uploadUrl = "cataloglog-ajax.php";
        fileUpload.uploadFileToUrl(file, uploadUrl, id_product, clear, $scope, pattern);
    };

$scope.inputCounter = 0;
$scope.inputs = [{
  id: 'image-duplicate'
}];
$scope.add = function() {
  $scope.inputTemplate = {
    id: 'input-' + $scope.inputCounter,
    name: ''
  };
  $scope.inputCounter += 1;
  $scope.inputs.push($scope.inputTemplate);
};
app.directive('customOnChange', function($parse) {
  return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {
        var fn = $parse(attrs.onReadFile);

        element.on('change', function(onChangeEvent) {
            var reader = new FileReader();

            reader.onload = function(onLoadEvent) {

                scope.$apply(function() {
                    fn(scope, {$fileContent:onLoadEvent.target.result});
                });

            };


            reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);

            //Get the Uploaded file mime type 
            mimeType=(onChangeEvent.srcElement || onChangeEvent.target).files[0].type;
            fileName=(onChangeEvent.srcElement || onChangeEvent.target).files[0].name;

        });
    }
};

})

what is "inputs", I do not see how it is being initialised in your controller? — tratto, Sep 12 '16 at 10:32
@tratto sry, i have added the code for inputs, i used it to clone the div — veeran, Sep 12 '16 at 11:14

score 0 · Answer 1 · edited May 23 '17 at 10:29

Take a look at this answer Upload multiple files in angular and the plunker here http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview

The only thing you need to change there to achieve your goal is to move

var values = [];

outside of bind function, so it will be

var values = []; element.bind('change', function () {

otherwise you will not be able to select files one by one, only in a multiple manner, several at once.

how to get cloned div data in angularjs

1 Answers1