How to reset the file upload control in Angular JS

Question

In my app I have a file upload control ,

   <label>Upload File</label>
    <div class="ui-select">
            <input type="file" name="files" ng-files="getTheFiles($files)" />
    </div>

And the controller code that helps uploading files is ...

    $scope.file = null;

    //UPLOAD FILE CODE
    var formdata;
    $scope.getTheFiles = function ($files) {
        console.log($files[0].type);
        formdata = new FormData();
        angular.forEach($files, function (value, key) {
            formdata.append(key, value);
        });
    };

    // NOW UPLOAD THE FILES.
    $scope.uploadFiles = function () {
        var request = {
            method: 'POST',
            url: BasePath + 'uploadNative/UploadFiles/',
            data: formdata,
            headers: {
                'Content-Type': undefined
            }
        };

        // SEND THE FILES.
        console.log(formdata);

        if (formdata != null || formdata != undefined) {
            $http(request)
                .success(function (response) {
                    if (response != "Failed!" && response !="FileAlreadyUploaded") {
                        console.log("Succeeds");
                    }
                    else if(response == "FileAlreadyUploaded")
                    {
                        angular.element("#fileUploadModal").modal();

                    }
                    else {
                        console.log("Failed");
                    }
                })
                .error(function () {
                });
        }

I want the file upload control to be cleared up upon success or failure ie

after

angular.element("#fileUploadModal").modal();

shows up the modal , I want the control to be cleared up . How would I do that ? Please explain.

Answer 1

Set an id to file upload control

Html:

<input id= "control" type="file" name="files" ng-files="getTheFiles($files)" />

Controller:

angular.element("#control").value = "";

Answer 2

Add ng-click to your input:

<input ng-click="reset()" id= "control" type="file" name="files" ng-files="getTheFiles($files)" />

and in your controller create a reset method:

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