title: Packery not initialized - Cannot call methods, i.e. $().packery("bindDraggabillyEvents")
body: <p>I am trying to combine packery and dragabilly on an image upload function. I am initializing both of them in the same function but get the error that packery has not initialized. I have tried splitting up my code into two functions, one to handle the image upload and dragabilly. The other to handle packery but I still get the same issue. Right now the images are getting pulled in and are draggable but packery isn't getting initialized. Any help is appreciated!</p>
  
  <p>JS</p>
  
  <pre><code>function handleFileSelect(evt) {
    var files = evt.target.files;
  
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
      if (!f.type.match('image.*')) {
        continue; // only accept image files
      }
  
      var reader = new FileReader();
      // Closure to capture the file information.
      reader.onload = (function(uploadedFile) {
        return function(e) {
          var $container = $(".packery")
          var div = document.createElement('div');
  
          div.className = "col-3 image-item";
          div.innerHTML = ['&lt;div class="handle"&gt;&lt;/div&gt;&lt;img class="thumb" src="', e.target.result,
                                  '" title="', escape(uploadedFile.name), '"/&gt;'].join('');
          document.getElementById('packery').insertBefore(div, null);
          var draggie = new Draggabilly (div, {
            handle: '.handle'
          });
  
        $container.packery('bindDraggabillyEvents', draggie);
       };
      })(f);
  
     // Read in the image file as a data URL.
     reader.readAsDataURL(f);
    } // end of for loop
  } // handlefileselect end
  
  $('#files').change(handleFileSelect);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;input id="files" multiple="true" name="files[]" type="file" /&gt;
  &lt;div class="packery" id="packery"&gt;&lt;/div&gt;
  </code></pre>