pet file uploader in more oop manor

petphotouploader.js.coffee

class PetPhotoUploader
  # html5 multiple uploader with fallback
  dom =
    parent_wrapper: '.controls'           # wrapper that contains all parent elements
    parent:         '.file-upload-wrapper' # container/wrapper of the file uploader
    hidden_upload:  '.hidden-upload'      # hidden file input
    file_text:      '.file-text'          # hidden wrapper notice to user which files they (will) uploaded
    delete_file:    '.delete-upload-file' # link to delete uploaded files
  uploaded_count = 0                      # total files uploaded

  constructor: (@photo_wrapper) -> # photo_wrapper = .add-a-pet .upload-photos
    @clickable = $(@photo_wrapper).find('a.file-upload')

  bind_click = (element) ->
    wrapper = element.closest(dom.parent)
    clicked =
      wrapper: wrapper
      hidden_input: wrapper.find(dom.hidden_upload).find('input')
      text_file: wrapper.find(dom.file_text)
      delete_link: wrapper.find(dom.delete_file)
      link: element
      files: 0

    element.on('click', (e) ->
      e.preventDefault()
      bind_input_change(clicked)
    )

  bind_input_change = (clicked) ->
    clicked.hidden_input.trigger('click')
    clicked.hidden_input.change ->
      if Modernizr.input.multiple
        clicked.files = this.files
        uploaded_count += clicked.files.length
        file_val = $('</p>').html('You uploaded ' + clicked.files.length + ' files of 6: ')

        for f in clicked.files
          file_val.append('<span class="filename">' + f.name + '</span>')
        if uploaded_count < 6   # clone uploader so user can upload more files
          cloned = $(dom.parent_wrapper).find('.frame-to-copy').clone()
          clicked.wrapper.after(cloned.removeClass('frame-to-copy'))
      else
        val = $(this).val()
        file_val = if val.length then val else ''
        uploaded_count += 1
        clicked.files = 1
        # count num of uploaders, max = 6, add new upload button
        uploader_count = $(dom.parent_wrapper).find('.file-upload-wrapper').not('.frame-to-copy').length
        if uploader_count < 6
          cloned = $(dom.parent_wrapper).find('.frame-to-copy').clone()
          parent_wrapper.after(cloned.removeClass('frame-to-copy').removeClass('hidden'))

      # append file name(s) to dom
      clicked.text_file.show().find('.file').append(file_val)
      clicked.link.hide()
      bind_delete(clicked)

  bind_delete = (clicked) ->
    # binds delete link
    clicked.delete_link.on('click', (e) ->
      e.preventDefault()
      if confirm('Confirming this will remove the file(s) from being uploaded')
        uploaded_count -= clicked.files.length
        clicked.text_file.hide().find('.file').html('')
        clicked.hidden_input.val('')
        clicked.link.show()
      )

  find_clickable: ->
    @clickable.each ->
      bind_click($(this))