Filepicker widget breaks after upload

问题

Building an app in Meteor with bootstrap on the frontend, and I'm having some confusing behavior in the filepicker widget. It takes a noticeable interval for it to render properly, but more troubling is that after the upload completes the widget is rendered incorrectly, and won't work to upload more.

--Subsequent work has uncovered an important fact! The widget breaks when the template itself re-renders, regardless of whether it was caused by the upload or by another interaction on the page.

here's the markup:

 <form class="form-horizontal">
     <div class="control-group" >
        <label class="control-label" for="uploadButton">
          Uploads &nbsp
        </label>
        <div class="contols" > 
          <input type="filepicker-dragdrop"
             data-fp-button-class="btn"
             data-fp-drag-text="Drop files here"
             data-fp-drag-class="span5"
             data-fp-multiple="true" id="uploadButton"/>
        </div>
      </div>
 </div>

and the client code (from the event map):

 'change #uploadButton' : (event) ->
            console.log JSON.stringify event.fpfiles

            resources = _.map(event.fpfiles, (file) ->
                    url : file.url
                    title : ""
                    date : ""
                    media : ""
                    size : "")
            Session.set('uploadedResources', _.union(resources, Session.get 'uploadedResources'))

This stuff all works as expected--the uploadedResources are properly used in the related jQuery .sortable; however, the upload widget is re-rendered as a text input, with the uploaded files' URL in the input field. Looking at the example on the docs reveals that this is not the intended behavior. What I want to do is ensure that I can simply keep using the upload widget to add files to the .sortable (at this point having it be possible for a user to duplicate uploaded files is perfectly acceptable--I realize that that _.union call is not actually doing the proposed job yet)

I'm not sure what is screwing up the rendering process here: is it a Meteor templates issue? bootstrap? or am I not doing the right thing with the widget code? I've also tried wrapping the form in {{#isolate}} and {{#constant}} directives (as well as both together), to no avail.

If I add the filepicker.constructWidget() stuff to the template.rendered event handler, things work fine; however, I'd be glad to know how this works correctly... that is, I'd rather declare the widget in the template, which seems much more readable.

来源：https://stackoverflow.com/questions/17663065/filepicker-widget-breaks-after-upload