Add file upload functionality - Fixes #7

src/documents/scripts/views/upload.js.coffee

@@ -0,0 +1,111 @@
+# Import
+$ = window.$
+{View} = require('./base')
+{File} = require('../models/file')
+{wait, thrower} = require('../util')
+
+# View
+class FileUploadItem extends View
+	el: $('.file-upload').remove().first().prop('outerHTML')
+
+	elements:
+		'.file-input': '$fileInput'
+		'.file-dropzone': '$dropzone'
+		'.upload-progress': '$progress'
+		'.upload-list': '$uploadList'
+
+	events:
+		'change .file-input': 'onFileSelect'
+		'dragover .file-dropzone': 'onDragOver'
+		'dragleave .file-dropzone': 'onDragLeave'
+		'drop .file-dropzone': 'onFileDrop'
+		'click .upload-button': 'onUploadClick'
+
+	render: =>
+		# Prepare
+		{site, $el, $fileInput, $dropzone} = @
+
+		# Setup drag and drop
+		$dropzone.on 'dragover', (e) =>
+			e.preventDefault()
+			$dropzone.addClass('drag-over')
+
+		$dropzone.on 'dragleave', (e) =>
+			e.preventDefault()
+			$dropzone.removeClass('drag-over')
+
+		$dropzone.on 'drop', (e) =>
+			e.preventDefault()
+			$dropzone.removeClass('drag-over')
+			files = e.originalEvent.dataTransfer.files
+			@uploadFiles(files)
+
+		# Chain
+		@
+
+	onFileSelect: (e) =>
+		files = e.target.files
+		@uploadFiles(files)
+
+	onUploadClick: (e) =>
+		@$fileInput.click()
+
+	uploadFiles: (files) =>
+		return unless files?.length
+
+		for file in files
+			@uploadFile(file)
+
+	uploadFile: (file) =>
+		{site} = @
+		return unless site
+
+		# Create form data
+		formData = new FormData()
+		formData.append('file', file)
+		formData.append('securityToken', site.get('token'))
+
+		# Upload URL
+		uploadUrl = "#{site.get('url')}/restapi/upload"
+
+		# Create upload item
+		$uploadItem = $('<div class="upload-item">')
+			.html("""
+				<span class="upload-name">#{file.name}</span>
+				<span class="upload-status">Uploading...</span>
+				<div class="upload-progress-bar"><div class="upload-progress-fill"></div></div>
+			""")
+		@$uploadList.append($uploadItem)
+
+		# Upload
+		$.ajax
+			url: uploadUrl
+			type: 'POST'
+			data: formData
+			processData: false
+			contentType: false
+			xhr: =>
+				xhr = $.ajaxSettings.xhr()
+				if xhr.upload
+					xhr.upload.addEventListener 'progress', (e) =>
+						if e.lengthComputable
+							percent = Math.round((e.loaded / e.total) * 100)
+							$uploadItem.find('.upload-progress-fill').css('width', percent + '%')
+				xhr
+			success: (data) =>
+				$uploadItem.find('.upload-status').text('Complete').addClass('success')
+				$uploadItem.find('.upload-progress-fill').css('width', '100%')
+
+				# Add file to collection
+				if data?.relativePath
+					fileModel = new File
+						relativePath: data.relativePath
+						name: file.name
+						site: site
+					File.collection.add(fileModel)
+			error: (xhr, status, err) =>
+				$uploadItem.find('.upload-status').text('Failed').addClass('error')
+				console.error 'Upload failed:', err
+
+# Export
+module.exports = {FileUploadItem}