Resetting File Input with AngularJS

Question

I've gone through a lot of tutorials and still fail to understand how to properly handle the situation. Please take a look and help me troubleshoot this.

I submit a form with json file uploaded. Then I want to reset file input field as soon as the button "Submit" is clicked.

The method clearData() sends the request to delete the data from the database whereas I want to clear only file-input field.

Here's a layout of my form:

<form id="json-upload-form" name="jsonUploadForm" enctype="multipart/form-data">
   <div class="row">
      <div class="col-md-12 json-upload-file">
         <div class="fileinput fileinput-new" data-provides="fileinput">
            <span class="choose-file-label">Select JSON file</span>
            <span class="btn btn-default btn-file uui-button">
            <span class="fileinput-new">Choose file</span>
            <span class="fileinput-exists">Change file</span>
            <input type="file" name="files" file-model="json.file"/>
            </span>
            <span class="fileinput-filename" ng-model="filename"></span>
            <a href="#" class="close fileinput-exists" data-dismiss="fileinput">×</a>
         </div>
         <button class="uui-button green" id="json-upload-button" ng-click="submit()">Upload file</button>
      </div>
   </div>
   <div class="row">
      <div class="col-md-12">
         <button type="button" class="uui-button green" id="json-clear-button" ng-click="clearData()">Clear data</button>
      </div>
   </div>
</form>

Here I have a directive looking into the value of a file:

angular.module('adminSmokeReportsApp')
.directive('fileModel', [
    '$parse',
    function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var model = $parse(attrs.fileModel);

                element.bind('change', function () {
                    model.assign(scope, element[0].files[0]);
                    scope.$apply();
                });
            }
        }
    }]);

Here comes the service that posts the data:

angular.module('adminSmokeReportsApp')
.service('multipartForm', [
    '$http',
    function ($http) {
        this.post = function (uploadUrl, data) {
            var formData = new FormData();
            formData.append("files", data.file);

            $http.post(uploadUrl, formData, {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': undefined
                }
            });
        }
    }]);

Finally the controller that handles the action:

angular.module('adminSmokeReportsApp')
.controller('JsonUploadCtrl', [
    '$scope',
    'config',
    'multipartForm',
    function ($scope, config, multipartForm) {
        $scope.clearData = function () {
            $.ajax({
                url: config.clearTestDataUrl,
                success: function () {
                    alert("All data cleared!");
                }
            });
        };

        $scope.json = {};

        $scope.submit = function () {
            var uploadUrl = config.jsonUploadFormUrl;
            multipartForm.post(uploadUrl, $scope.json);
        };
    }]);

I've tried an approach where we save the initial state and then operate with angular.copy to make a change. Ultimately, myForm.$setPristine() doesn't seem to do the trick.

I also wanted to invoke val() on an element to set it to null. No success either. Although it does work if I use the function in the directive, but that happens before the moment when upload method is executed.

As you can see, I'm a newbie and I might as well have the solution, but have no idea about the right way of applying it. Thanks!

Answer 1

The right approch is to clean any binded data from the view and then use the setPristine() on jsonUploadForm from the $scope. I would suggest you to keep all of your bindings on a single model object on the $scope and just set it to be null.

See this answer for more details: Resetting form after submit in Angularjs