How to test dropzone uploading files with capybara?

I am trying use capybara to test uploading multiple files.

my html looks like this

<div class="dropzone span7">
  <div class="upload cloud-upload"></div>
  <p>
    Drag and drop to upload, or 
    <span class='underline'>click to browse</span>.
  </p>
  <div class="progress-bar text-center hide">
    <img src="/assets/loader.gif" alt="Loader" />
  </div>
  <div class="progress-message text-center hide">
    <span></span>
  </div>
</div>
<div class="clearfix"></div>
<form class="simple_form document-form" data-disabled="false" novalidate="novalidate" id="edit_document_7471" enctype="multipart/form-data" action="/loans/2030/documents/7471" accept-charset="UTF-8" method="post">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input type="hidden" name="_method" value="patch" />
    <input type="hidden" name="authenticity_token" value="iz3JAp9YGjB858fDF/mo6ICk+LmNFdg6tfQQtZh/oNRu7wezxQD/7e43abshZtVEK9CpST7m+MPeHSFVrhAS+A==" />
    <input class="hidden" type="hidden" value="Business" name="document[documentable_type]" id="document_documentable_type" />
    <input class="hidden" type="hidden" value="1453" name="document[documentable_id]" id="document_documentable_id" />
    <input value="Document::BusinessLicense" class="hidden" type="hidden" name="document[type]" id="document_type" />
    <div class="control-group file optional document_file error">
      <div class="controls">
        <input errors="false" class="file optional" type="file" name="document[file]" id="document_file" />
        <input type="submit" name="commit" value="save" data-disable-with="save" />
        <span class="help-inline">can&#39;t be blank</span>
      </div>
    </div>
</form>
<div class="control-group error">
  <div class="help-inline"></div>
</div>

I tried the solution from How do you test uploading a file with capybara and Dropzone?.

I got either $('.dropzone')[1].dropzone is undefined or $('.dropzone')[0].dropzone.listeners[0] is undefined.