-
Notifications
You must be signed in to change notification settings - Fork 406
Plugin Attachments
fusion94 edited this page Feb 21, 2013
·
2 revisions
This plugin displays allows a user to upload an attachment to a Kandan instance.
Just drag and drop a file into the Media Sidebar box. This is a CORE plugin and shouldn't be removed.
class Kandan.Plugins.Attachments
@widget_title: "Media"
@widget_icon_url: "/assets/media_icon.png"
@pluginNamespace: "Kandan.Plugins.Attachments"
@dropzoneInit: false
@options:
maxFileNameLength: 20
defaultDropzoneText: "Drop file here to upload"
@templates:
noFiles: _.template '''
<div style="text-align:center; text-transform: uppercase; font-size: 11px; color: #999; padding: 10px;">
No media yet. Try uploading.
</div>
'''
dropzone: _.template '''
<form accept-charset="UTF-8" action="/channels/<%= channelId %>/attachments.json" data-remote="true" html="{:multipart=>true}" id="file_upload" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
<input name="<%=csrfParam %>" type="hidden" value="<%= csrfToken %>"/>
</div>
<input id="channel_id_<%= channelId %>" name="channel_id[<%= channelId %>]" type="hidden"/>
<input id="file" name="file" type="file"/>
<div class="dropzone"><%= dropzoneText %></div>
</form>
'''
fileItemTemplate: _.template '''
<div class="file_item">
<a target="_blank" href="<%= url %>">
<img src="<%= iconUrl %>"/>
<span><%= fileName %></span>
</a>
</div>
'''
@csrfParam: ->
$('meta[name=csrf-param]').attr('content')
@csrfToken: ->
$('meta[name=csrf-token]').attr('content')
@truncateName: (fileName)->
return "#{fileName.substring(0, @options.maxFileNameLength)}..." if fileName.length > @options.maxFileNameLength
fileName
@fileIcon: (fileName)->
fileExtension = fileName.split(".").pop()
return "/assets/img_icon.png" if fileExtension.match(/(png|jpeg|jpg|gif)/i)
return "/assets/audio_icon.png" if fileExtension.match(/(mp3|wav|m4a)/i)
return "/assets/video_icon.png" if fileExtension.match(/(mov|mpg|mpeg|mp4)/i)
return "/assets/file_icon.png"
# TODO this part is very bad for APIs! Shouldn't be exposing a backbone collection in a plugin.
@render: ($widgetEl)->
$uploadForm = @templates.dropzone({
channelId: Kandan.Data.Channels.activeChannelId(),
csrfParam: @csrfParam(),
csrfToken: @csrfToken(),
dropzoneText: @options.defaultDropzoneText
})
$widgetEl.next().html($uploadForm)
$widgetEl.next(".action_block").html($uploadForm)
populate = (collection)=>
if collection.models.length > 0
$fileList = $("<div class='file_list'></div>")
for model in collection.models
$fileList.append(
@templates.fileItemTemplate({
fileName: @truncateName(model.get('file_file_name')),
url: model.get('url')
iconUrl: @fileIcon(model.get('file_file_name'))
})
)
else
$fileList = @templates.noFiles()
$widgetEl.html($fileList)
Kandan.Data.Attachments.all(populate)
@initDropzone: ->
$(".dropzone").filedrop({
fallback_id: "file"
paramname : "file"
maxfilesize: 1000
queuefiles : 1
url: ->
"/channels/#{ Kandan.Data.Channels.activeChannelId() }/attachments.json"
uploadStarted: ->
$(".dropzone").text("Uploading...")
uploadFinished: (i, file, response, time)->
console.log "Upload finished!"
error: (err, file)->
if err == "BrowserNotSupported"
$(".dropzone").text("Browser not supported")
else if err == "FileTooLarge"
$(".dropzone").text("File too large")
else
$(".dropzone").text("Sorry bud! couldn't upload")
progressUpdated: (i, file, progress)->
$(".dropzone").text("#{progress}% Uploaded")
if progress == 100
$(".dropzone").text("#{progress}% Uploaded")
Kandan.Widgets.render "Kandan.Plugins.Attachments"
dragOver: ->
console.log "reached dropzone!"
$(".dropzone").text("UPLOAD!")
dragLeave: ->
console.log "left dropzone!"
$(".dropzone").text("Drop file here to upload")
})
@init: ()->
@initDropzone()
Kandan.Widgets.register @pluginNamespace
Kandan.Data.Attachments.registerCallback "change", ()=>
Kandan.Widgets.render @pluginNamespace
Kandan.Data.Channels.registerCallback "change", ()=>
Kandan.Widgets.render @pluginNamespace
Copyright © 2012-2013 - KandanApp