Tip for making sure filepicker.io widgets get rendered in Meteor

[Joshua Ellis]

Hey all,

I don't know if anybody else has had as much trouble using Filepicker.io with Meteor as I have! My problem isn't that the actual library doesn't load -- it loads fine -- but that something about Meteor's rendering system means that Filepicker's trick of converting a textbox to a filepicker upload widget doesn't always fire. I'm not sure why it happens, because I'm not that bright...but I found a trick that seems to solve this problem, or at least provide a workaround. 

To wit, if you're using a Filepicker generated input box like so:

<input type="filepicker" name='myImage' value='' data-fp-apikey="myreallylongapikey" data-fp-mimetypes="image/*" data-fp-container="modal">

You can force it to convert the text input (or each of multiple text inputs, if you're like me) using this:

$("input[type='filepicker']").each(function(i,e){

if($(e).css('display') != "none"){

filepicker.constructWidget(e);

}

});

The great thing about this trick is that it only triggers if Filepicker doesn't automatically convert the input boxes (which gives them a display:none style). Of course, this fails if your input also has a display:none in and of itself, but you can probably figure out a workaround for that. It also assumes you're using jQuery, of course.

Anyway, a bit of a specialized case, but it seems to be working for me, and I hope it helps if you've run into this same infuriating problem yourself. Good luck!  :-)

[mike levine]

Josh you are a genius. For real, you just saved me hours of work.  This is a really useful snippet of code. Much appreciated!!