Same file can not be uploaded twice in angularjs using fileModel

Question

I am using angular js fileModel directive to upload file, which is as below

angular.module('MyProject').directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

And I am using the same in html as below,

 <input type='file' class="imgInp" file-model="tenantLogoFile"/>

If I select one file then Its fine for me to capture the file chosen by user by using $watch on "tenantLogoFile". But if I am supposed to upload same file (Without refreshing page) immediately again, $watch does not get fired and ultimately I am unable upload the file.

I tried setting $scope.tenantLogoFile = null after first time successful upload, but no use, Can anyone help me please?

Hi Aayushi I studied you code, But I did not understand, where is the call to "$scope.uploadFile" function? — Vish
– Vish, Commented Jul 14, 2017 at 10:25
Sorry forgot to update that, check this one: jsfiddle.net/ZG9re/7161 — Aayushi Jain
– Aayushi Jain, Commented Jul 14, 2017 at 10:29
Hi, This not working Aayushi.. Is this chrome problem??? I am fed up with this. Can you upload SAME FILE back to back without refreshing page? — Vish
– Vish, Commented Jul 14, 2017 at 10:35

Vish · Accepted Answer · 2017-07-14 11:37:31Z

6

Anyways guys I found a workaround as below,

<input type='file' file-model="myFile" ng-click="clearFileSelection();"/>

I wrote a function named "clearFileSelection" in controller and called it on every subsequent click on the file chooser button, so that the previous file contents got cleared, function code is as below.

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

I hope this will definitely help some other strugglers like me.. Happyyy Coding..!!

answered Jul 14, 2017 at 11:37

Vish

2803 silver badges18 bronze badges

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

Comments

Ahmet Emre Kilinc · Accepted Answer · 2022-09-28 14:43:02Z

0

You don't have to alter your HTML or controller. As your directive is restrict to attribute. Its better use element.on('click',fn) for this scenario.

angular.module('MyProject').directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            *element.on('click', function(){
                angular.element("input[type='file']").val(null);
            });*
            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

edited Sep 28, 2022 at 14:43

Ahmet Emre Kilinc

7,05119 gold badges37 silver badges49 bronze badges

answered May 6, 2020 at 17:04

Krishan Kant Agarwal

1

1 Comment

Love and peace - Joe Codeswell Over a year ago

Hi Krishan. I suggest you put your code into a markdown code fence. Meaning enclose it in 3 backticks like ``` lines of code go in here ``` . That will make your answer much easier to read.

Collectives™ on Stack Overflow

Same file can not be uploaded twice in angularjs using fileModel

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related