Batman.js and mass file upload with drag and drop

components_new_view.coffee

class Funzies.ComponentsNewView extends Batman.View
  constructor: ->
    super
    @set 'pendingComponents', new Batman.Set
    @set 'defaultKind', null
    @set 'newFiles', null
    @observe 'newFiles', (nv, ov) ->
      if nv?.length
        @_componentsFromFiles(nv)

  preventDefault: (node, e, view) ->
    e.preventDefault()
    false

  createComponentsFromFiles: (node, e, view) ->
    files = e.originalEvent.dataTransfer.files
    @_componentsFromFiles(files)
    e.preventDefault()
    false

  _componentsFromFiles: (files) ->
    defaultKind = @get('defaultKind')
    for file in files
      component = Funzies.Component.fromFile(file)
      @get('pendingComponents').add(component)
      if defaultKind
        component.set('kind', defaultKind)

  addFiles: ->
    $('.js-file-input').click()

  saveAll: ->
    @set('saved', 0)
    @set('saving', true)
    components = @get('pendingComponents').toArray()
    @set('total', components.length)
    components.forEach (c) =>
      @_saveComponent(c)

  _saveComponent: (component) ->
    component.save (err, record) =>
      return if err?
      @set('saved', @get('saved') + 1)
      @get('pendingComponents').remove(component)
      if @get('percentComplete') is 100
        setTimeout =>
            @unset('saving')
          , 3000

  clearAll: ->
    @get('pendingComponents').clear()

  @accessor 'percentComplete', ->
    ((@get('saved') / @get('total') ) || 0) * 100

new.html.slim

div data-contentfor='cmd-nav'
  .col-xs-3
    p.lead Upload Components
  .col-xs-3
    .form-group
      select.form-control data-bind='defaultKind'
        option value="" Default Component Type
        option data-foreach-kind='Component.KINDS' data-bind='kind' data-bind-value='kind'
  .col-sm-2
    .btn.btn-primary data-event-click='addFiles'
      | Add Files
    input.js-file-input.hidden type='file' multiple='true' data-bind='newFiles'
  .col-sm-2
    .btn.btn-success data-event-click='saveAll'
      | Start upload
  .col-sm-2
    .btn.btn-danger data-event-click='clearAll'
      | Clear All

.row data-showif='saving'
  .col-sm-12
    .progress.progress-striped.active role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
      .progress-bar.progress-bar-success data-style-width='percentComplete | append "%"'
.row data-event-dragover='preventDefault' data-event-dragenter='preventDefault' data-event-drop='createComponentsFromFiles'
  .well.col-xs-12
    | Drag images here or 
    a.btn-link data-event-click='addFiles' select them
    |  to create components.
    ul.list-unstyled
      li File names will be used as default component names.
      li If you select a <strong>default type</strong>, it will be applied to the images you upload.


ul.list-unstyled
 li.row data-foreach-component='pendingComponents'
  .col-sm-2
    img.component-preview data-bind-src='component.assetPreviewURL'

  .col-sm-9
    .row
      .text-danger data-showif='component.errors.length'
        ul
          li data-foreach-e="component.errors" data-bind='e.fullMessage'
    .row
      .col-sm-9
        .form-group
          input.form-control.name type='text' data-bind='component.name'
      .col-sm-3
        .form-group
          select.form-control.kind data-bind='component.kind'
            option data-foreach-kind='Component.KINDS' data-bind='kind' data-bind-value='kind'
  .col-sm-1
    .btn.btn-danger.delete data-event-click='pendingComponents.remove | withArguments component'
      span Remove