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

Closed
montgomery1944 opened this Issue Jun 1, 2015 · 4 comments

Projects

None yet

3 participants

@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 danialfarid pushed a commit that closed this issue Jun 4, 2015
Danial Farid Fixed #783 #764 #777 #766 #763 #761 #721 #687 #650 #710 #784 #768 #789 39fa784
@danialfarid
Owner

Fixed in version 5.0.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment