sample.jade

head
  meta(charset="utf-8")
  meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
  title fileCollection test app
  meta(name="description" content="")
  meta(name="viewport" content="width=device-width")

body
  div.ui.container(id="fileDropID")
    +collTest

template(name="collTest")
  div.ui.segment
    h3.ui.header file-collection Test App
    if currentUser
      span.pull-right
        b UserId:
        span.text-info #{userId}
        b Token:
        span.text-info #{loginToken}
    div.loginTemp
      +loginButtons align="right"
  div.ui.segment.fileDrop
    table.ui.celled.striped.table
      thead
        tr
          th Name
          th ID
          th Owner
          th Size
          th MIME Type
          th MD5
          th Preview
      tbody
        each dataEntries
          tr
            td
              if length
                a(href="{{link}}?download=true") {{shortFilename 56}}
              else
                | {{shortFilename 56}}
              button.ui.mini.basic.icon.right.floated.button.close.del-file(type="button" aria-hidden="true")
                i.remove.icon
            td {{truncateId id}}
            td
              if owner
                | #{owner}
              else
                span.text-muted No owner
            td
              if length
                | #{formattedLength}
              else
                | #{uploadStatus}
                br
                | #{uploadProgress}% complete
                br
                div.ui.bottom.attached.indicating.progress(data-percent="{{uploadProgress}}")
                  div.bar(style="transition-duration: 100ms; width: {{uploadProgress}}%;")
            td #{contentType}
            td {{truncateId md5}}
            td
              if isImage
                a(href="{{link}}")
                  img.img-thumbnail(alt="[ preview of {{shortFilename 16}} will display here ]" src="{{link}}" width="150")
              else
                span.text-muted No preview
        else
          tr
            td.center.aligned(colspan="20")
              span.text-info No files in collection, drag some here to upload