Geek Answers Handbook

Javascript / Angular: clear image shape selection

All this in angular.

Without too many boring details, I have an image upload button that doesn't actually upload images. Instead, the 'dummy' form element simply passes the information to another array, which shows small thumbnails of the image image and gives the user the ability to delete everything they don’t want to load.

All this works pretty neatly (just as neatly as loading images), except for one annoying detail:

select screenshot of file

The 'dummy' button always displays the number of recently downloaded images, even if the user could delete these images from the actual record array. The button can also be used several times, so it can say “2 files” when there are actually 8 files. Or 10. Or 0.

I want to remove this entry through the controller after adding its contents to the recording array, but I cannot figure out how to do this.

I tried nullingfrom the model for input, for the SO answer , which:

vm.addImages=null;

Bad luck. Still 2 files.

I tried rummaging through the form object itself, again using the SO response , but I don't want to clear the entire form, just this one element.

Here's the corresponding $watchfrom the controller:

$scope.$watch('vm.addImages', function() {
        if(vm.addImages.length){
            _.each(vm.addImages, function(image){
                vm.building.images.push(image);
            });
            vm.addImages = null; //this is the issue.
        }
    });

Any ideas?

Thank.

+4
1

clear

$scope.clear = function () {
    angular.element("input[type='file']").val(null);
};

.

var app = angular.module('myApp', []);

    app.controller('myCtrl', ['$scope', function($scope){
        $scope.uploadFile = function(){
            var file = $scope.myFile;

            console.log('file is ' );
            console.dir(file);

            var uploadUrl = "/fileUpload";
            fileUpload.uploadFileToUrl(file, uploadUrl);
        };

        $scope.clear = function () {
            angular.element("input[type='file']").val(null);
        };

    }]);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app = "myApp">

    <div ng-controller = "myCtrl">

        <input type = "file" ng-model = "myFile" file-select="file"/>

        <button ng-click="clear()">clear</button>
    </div>
  </body>
+2

More articles:


All Articles