Javascript File Upload

assets.js.coffee

jQuery ->
  $('#tutorials').change ->
    $('#asset_chapter_id').after('<span id="loader">&nbsp;<img src="/assets/icons/loader.gif" alt="#" />&nbsp;Loading chapters...</span>')
    tutorial = $(@).val()
    $.getJSON '/admin/assets/chapters/' + tutorial + '.json', (data) ->
      output = ""
      for chapter in data
        output += '<option value="' + chapter[1] + '">' + chapter[0] + '</option>'     
      $('#asset_chapter_id').html('').html(output)
      $('#loader').remove()
      
  $('.fancybox').fancybox({
    titlePosition: 'inside'
  })
      
  # Drag & Drop Support and Files Uploads

  ZoneHover = (e) ->
    e.stopPropagation()
    e.preventDefault()
    e.target.className = ""
    e.target.className = "hover" if e.type is "dragover"

  FileSelectHandler = (e) ->
    ZoneHover(e)
    files = e.target.files || e.dataTransfer.files
    date =  new Date()
    for f in files
      d = hex_md5(f.name + f.type + f.size + date.getTime())
      ParseFile f, d 
      UploadFile f, d
      
  ParseFile = (f, d) ->    
    if (f.type.indexOf("image") == 0)  
      reader = new FileReader() 
      reader.onload = (e) -> 
        output = '<tr>'
        output += '<td><img src="' + e.target.result + '" alt="" width="50" /></td>'
        output += '<td>' + f.name + '</td>'
        output += '<td>' + f.type + '</td>'
        output += '<td>' + f.size + ' bytes</td>'
        output += '<td><div id="' + d + '" class="progress progress-info progress-striped active"><div class="bar" style="width: 0%;"></div></div></td>'
        output += '</tr>'
        $('#statuses').append(output)
      reader.readAsDataURL(f);
      
  UploadFile = (f, d) ->
    xhr = new XMLHttpRequest()
    if (xhr.upload)
      # Progress bar      
      xhr.upload.addEventListener "progress", (e) ->
        progress = parseInt((e.loaded / e.total) * 100)
        $('#' + d).find('.bar').css('width', progress + '%')
      , false
      
      # Final status
      xhr.onreadystatechange = (e) ->
        if xhr.readyState is 4
          className = "progress-danger"
          className = "progress-success" if xhr.status is 201
          statusMessage = "Error"
          statusMessage = "Uploaded" if xhr.status is 201
          # $('#' + d).text(statusMessage)
          $('#' + d).removeClass('active progress-info').addClass(className)
      
      # Upload
      xhr.open("POST", "/admin/assets.json", true)  
      xhr.setRequestHeader("X_FILENAME", f.name) 
      data = new FormData(document.getElementById('new_asset'))
      data.append("asset[picture]", f)
      xhr.send(data) 
    
  init = ->
    submit = document.getElementById("form-actions")
    files = document.getElementById("classic-input")
    zone = document.getElementById("drag-drop-support")
    
    files.addEventListener("change", FileSelectHandler, false) if files
    
    xhr = new XMLHttpRequest()
    if (xhr.upload && files)
      zone.addEventListener("dragover", ZoneHover, false)
      zone.addEventListener("dragleave", ZoneHover, false)
      zone.addEventListener("drop", FileSelectHandler, false)
      zone.style.display = 'block'
      submit.style.display = 'none'
      files.style.display = 'none'
      
  if (window.File && window.FileList && window.FileReader)
    init()

nice job :)