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. — E. Maggini
Not sure how to build an entire angular application in jsfiddle, but I'll try. — crowhill

Tirthraj Rao Tirthraj Rao · Accepted Answer · 2016-06-15T18:10:16

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>

Javascript/Angular: clear image select form input

1 Answers