avatarupload.coffee

$ ->

  $('#avatar').hover ->
    $('.qq-upload-button').fadeTo(250, 1)
  , ->
    $('.qq-upload-button').fadeTo(250, 0)

  if $('#file-uploader.author-profile').length > 0
    uploader = new qq.FileUploader({
      template: """
        <div class="qq-uploader">
          <div class="qq-upload-drop-area"><span><strong>Drop files here to upload</strong></span></div>
          <div class="qq-upload-button"><span><strong>Click to edit, or drop files here to upload</strong></span></div>
          <ul class="qq-upload-list" style="display:none;"></ul>
        </div>
      """,
      fileTemplate: """
        <li class="in-progress">
          <img src="" alt="" class="image" style="display:none">
          <span class="qq-upload-spinner" style="display:none;"></span>
          <span class="spinner"></span>
          <div class="file-info" style="display:none;">
            <strong style="display:none;"><span class="file-name qq-upload-file"></span></strong>
            <span class="file-size qq-upload-size"></span>
          </div>
          <a class="qq-upload-cancel" href="#" style="display:none;">Cancel</a>
        </li>
      """,
      element: $('#file-uploader.author-profile')[0],
      listElement: $('#avatar .avatar-list')[0]
      action: window.location.pathname.replace(/\/edit$/, '/avatar'),
      params: {
        authenticity_token: $('meta[name=csrf-token]').attr('content')
      },
      onComplete: (id, fileName, responseJSON) ->
        element = $('#avatar')
        element.find('.loading, .file-info, .qq-upload-cancel').remove()
        if responseJSON['success']
          element.find('.avatar-list li:first').remove()
          element.find('img').attr('src', responseJSON['width170_url']).fadeIn 250, ->
            element.find('.spinner').remove()
            element.find('.in-progress').removeClass('in-progress')
        else
          element.find('.spinner').addClass('error')
          element.find('.file-size').text("Attach failed, please try again later.")
      ,
      onSubmit: (id, fileName) ->
        $('#avatar .avatar-list img').fadeTo(250, 0.75)
        $('#file-uploader.author-profile .qq-upload-button').hide();
        $('<span />').addClass('spinner').insertAfter($('#avatar img'))
      ,
      showMessage: (message) ->
        $.flash 'alert', message
    })

avatarupload_angular.coffee

tc.angular.app.directive 'avataruploader', ->
  (scope, el, attrs) ->
    scope.upload = {}
    scope.upload.state = 'idle'

    scope.uploader = new qq.FileUploaderBasic
      element: el
      button: $(el).find('a.button')[0]
      action: window.location.pathname.replace(/\/edit$/, '/avatar')
      multiple: false
      debug: true
      validation:
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
        sizeLimit: 300 * 1024
      params:
        authenticity_token: $("meta[name=csrf-token]").attr("content")
      onSubmit: (args...) -> scope.onSubmit args
      onUpload: (args...) ->  scope.onUpload args
      onProgress: (args...) -> scope.onProgress args
      onComplete: (args...) -> scope.onComplete args
      showMessage: (message) -> $.flash 'alert', message

    scope.onSubmit = (id, fileName) ->
      scope.upload.state = 'uploading'
      scope.upload.progress = 0

    scope.onProgress = (id, fileName, loaded, total) ->
      scope.upload.state = 'uploading'
      scope.upload.progress = loaded / total

    scope.onComplete = (id, fileName, responseJSON) ->
      console.log id, fileName, responseJSON
      if responseJSON
        response = JSON.parse "#{responseJSON}"
        scope.upload.state = 'complete'
        scope.upload.completed = if response['success'] then 'success' else 'fail'
        scope.upload.src = response['width170_url']