Created file input, when using ngf-select on button, is not removed on button removal

[montgomery1944]

When using ngf-select directive on button element additional file input is created and attached to the bottom of the body. The problem is, that when the button element is removed and its scope is destroyed, previously created file input is not removed from the DOM. This problem leads to a situation, when multiple file inputs can remain in the DOM. To fix this issue the library should remove created file input on scope/element destroy.

[philBrown]

This is also messing with the layout of our site as the elements take up space at the bottom of the page, causing the scroll bar to show. You should at least position them at the top-left.

Had to work-around this with some custom CSS

body > input[ngf-select] {
    top: 0;
    left: 0;
}

[philBrown]

I'm working around this by adding a custom attribute to my ngf-select elements which is copied to the <input type="file"> element created by ng-file-upload, eg

<button ngf-select data-upload="something-identifiable"...

then removing these when the parent scope (controller, directive) is destroyed

$scope.$on('$destroy', function() {
    var body = $document[0].body,
        inputs = $document[0].querySelectorAll('body > input[data-upload="something-identifiable"]');
    angular.forEach(inputs, function(input) {
        body.removeChild(input);
    });
});

[montgomery1944]

There is a simpler solution to this issue, reference to the created file input is saved on the button element under "ngf_ref_elem" property, so I can write directive like this:

link: function (scope, element) {

    scope.$on('$destroy', function () {
        if (element.__ngf_ref_elem__) {
            element.__ngf_ref_elem__.remove();
            element.__ngf_ref_elem__ = null;
        }
    });

}

and put it on the button element.

I still hope, that this issue will be fixed internally in the library.

[danialfarid]

Fixed in version 5.0.0