Javascript/Angular: clear image select form input

Question

All of this is in angular.

Without too many boring details, I have an image upload button that doesn't actually upload images. Instead, the 'dummy' form element just passes information on to a different array that shows little preview thumbnails of the image and gives the user the option to delete any they don't want to upload.

All of this is working rather neatly (as neatly as image upload ever works), except for one irritating detail:

The 'dummy' button always displays the number of images last 'uploaded' even though the user might have deleted those images from the actual array of record. The button can also be used multiple times, so it could say '2 files' when in fact there are 8 files. Or 10. Or 0.

I want to empty that input via the controller after adding its contents to the array of record, but I can't figure out how.

I've tried nulling out the model for the input, per an SO answer that is:

vm.addImages=null;

No luck. Still '2 files'.

I've tried rummaging around in the form object itself, again via an SO answer but I don't want to clear the entire form, just this one element.

Here's the relevant $watch from 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?

Thanks.

It would be useful if you could create a jsfiddle or similar to show current issue. — user796446
– user796446, Commented Jun 15, 2016 at 17:47
Not sure how to build an entire angular application in jsfiddle, but I'll try. — crowhill
– crowhill, Commented Jun 15, 2016 at 17:58

Tirthraj Barot · Accepted Answer · 2016-06-15 18:10:16Z

2

clear function should be defined as below

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

Check the snippet below.

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>

answered Jun 15, 2016 at 18:10

Tirthraj Barot

2,6792 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user796446 Over a year ago

This also shows how you would encapsulate your problem as a JSfiddle....no need to build an entire app.

crowhill Over a year ago

This is the answer to my question.

Collectives™ on Stack Overflow

Javascript/Angular: clear image select form input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related