Skip to content

Instantly share code, notes, and snippets.

@4e4c52
Created June 29, 2012 12:09
Show Gist options
  • Save 4e4c52/3017598 to your computer and use it in GitHub Desktop.
Save 4e4c52/3017598 to your computer and use it in GitHub Desktop.
Javascript File Upload
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()
@tgy
Copy link

tgy commented Jun 29, 2012

nice job :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment