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 i.e.

after

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

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

Sajal · Accepted Answer · 2016-06-03 17:27:43Z

2

Set an id to file upload control

Html:

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

Controller:

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

edited Jun 3, 2016 at 17:27

answered Jun 3, 2016 at 17:04

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

Comments

muetzerich · Accepted Answer · 2016-06-03 17:22:52Z

1

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);
};

answered Jun 3, 2016 at 17:22

muetzerich

5,7308 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to reset the file upload control in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related