How to add filepicker to angularjs template

Question

I have built an app where I need dynamically change templates.

<div ng-include="templateUrl"></div>

I have two templates like addtext.html and addmedia.html. I dynnamically change it using angularjs. But in my addmedia.html template, I have filepicker's pick file widget.

<input type="filepicker" data-fp-apikey="..." data-fp-mimetypes="*/*" data-fp-container="modal" onchange="save_url()">

The pick widget does not load in the template. Is there any way to get it to work?

Answer 1

Well, I don't know much about filepicker.io, but as far as I understand, the problem is that widgets are constructed on page load. This means that when you switch templates, filepicker may not process them automatically, see documentation:

We'll automatically convert any widgets that you have on page load. However, if you want to create widgets once the page has loaded, you can... call filepicker.constructWidget(); method.

So, I would suggest you a simple directive that just puts an input tag with type=filepicker, and then linking filepicker to it using before mentioned method, like this:

app.directive('myFilepicker', [function() {
    return {        
        transclude: true,
        restrict: "E",    
        template: '<input type="filepicker">',
        replace: 'true',
        link: function(scope, element) {
            filepicker.constructWidget(element);
        }
    };
}]);

and in your markup you can use it like this:

<my-filepicker data-fp-apikey="..." data-fp-mimetypes="*/*" data-fp-container="modal" onchange="save_url()"></my-filepicker>

See this demo. I don't have filepicker.io API key, but I hope this would work.