/* * Default text - jQuery plugin for html5 dragging files from desktop to browser * * Author: Weixi Yen * * Email: [Firstname][Lastname]@gmail.com * * Copyright (c) 2010 Resopollution * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.github.com/weixiyen/jquery-filedrop * * Version: 0.1.0 * * Features: * Allows sending of extra parameters with file. * Works with Firefox 3.6+ * Future-compliant with HTML5 spec (will work with Webkit browsers and IE9) * Usage: * See README at project homepage * */ (function($) { jQuery.event.props.push("dataTransfer"); var opts = {}, default_opts = { url: '', refresh: 1000, paramname: 'userfile', maxfiles: 25, // Ignored if queuefiles is set > 0 maxfilesize: 1, // MB file size limit queuefiles: 0, // Max files before queueing (for large volume uploads) queuewait: 200, // Queue wait time if full data: {}, drop: empty, dragEnter: empty, dragOver: empty, dragLeave: empty, docEnter: empty, docOver: empty, docLeave: empty, beforeEach: empty, afterAll: empty, rename: empty, error: function(err, file, i) { alert(err); }, uploadStarted: empty, uploadFinished: empty, progressUpdated: empty, speedUpdated: empty }, errors = ["BrowserNotSupported", "TooManyFiles", "FileTooLarge"], doc_leave_timer, stop_loop = false, files_count = 0, files; $.fn.filedrop = function(options) { opts = $.extend({}, default_opts, options); this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave); $(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave); }; function drop(e) { opts.drop(e); files = e.dataTransfer.files; if (files === null || files === undefined) { opts.error(errors[0]); return false; } files_count = files.length; upload(); e.preventDefault(); return false; } function getBuilder(filename, filedata, mime, boundary) { var dashdash = '--', crlf = '\r\n', builder = ''; if (opts.data) { var params = $.param(opts.data).split(/&/); $.each(params, function() { var pair = this.split(/=/, 2); var name = decodeURI(pair[0]); var val = decodeURI(pair[1]); builder += dashdash; builder += boundary; builder += crlf; builder += 'Content-Disposition: form-data; name="' + name + '"'; builder += crlf; builder += crlf; builder += val; builder += crlf; }); } builder += dashdash; builder += boundary; builder += crlf; builder += 'Content-Disposition: form-data; name="' + opts.paramname + '"'; builder += '; filename="' + filename + '"'; builder += crlf; builder += 'Content-Type: ' + mime; builder += crlf; builder += crlf; builder += filedata; builder += crlf; builder += dashdash; builder += boundary; builder += dashdash; builder += crlf; return builder; } function progress(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); if (this.currentProgress != percentage) { this.currentProgress = percentage; opts.progressUpdated(this.index, this.file, this.currentProgress); var elapsed = new Date().getTime(); var diffTime = elapsed - this.currentStart; if (diffTime >= opts.refresh) { var diffData = e.loaded - this.startData; var speed = diffData / diffTime; // KB per second opts.speedUpdated(this.index, this.file, speed); this.startData = e.loaded; this.currentStart = elapsed; } } } } // Respond to an upload function upload() { stop_loop = false; if (!files) { opts.error(errors[0]); return false; } var filesDone = 0, filesRejected = 0; if (files_count > opts.maxfiles && opts.queuefiles === 0) { opts.error(errors[1]); return false; } // Define queues to manage upload process var workQueue = []; var processingQueue = []; var doneQueue = []; // Add everything to the workQueue for (var i = 0; i < files_count; i++) { workQueue.push(i); } // Helper function to enable pause of processing to wait // for in process queue to complete var pause = function(timeout) { setTimeout(process, timeout); return; } // Process an upload, recursive var process = function() { var fileIndex; if (stop_loop) return false; // Check to see if are in queue mode if (opts.queuefiles > 0 && processingQueue.length >= opts.queuefiles) { return pause(opts.queuewait); } else { // Take first thing off work queue fileIndex = workQueue[0]; workQueue.splice(0, 1); // Add to processing queue processingQueue.push(fileIndex); } try { if (beforeEach(files[fileIndex]) != false) { if (fileIndex === files_count) return; var reader = new FileReader(), max_file_size = 1048576 * opts.maxfilesize; reader.index = fileIndex; if (files[fileIndex].size > max_file_size) { opts.error(errors[2], files[fileIndex], fileIndex); // Remove from queue processingQueue.forEach(function(value, key) { if (value === fileIndex) processingQueue.splice(key, 1); }); filesRejected++; return true; } reader.onloadend = send; reader.readAsBinaryString(files[fileIndex]); } else { filesRejected++; } } catch (err) { // Remove from queue processingQueue.forEach(function(value, key) { if (value === fileIndex) processingQueue.splice(key, 1); }); opts.error(errors[0]); return false; } // If we still have work to do, if (workQueue.length > 0) { process(); } }; var send = function(e) { var fileIndex = ((typeof(e.srcElement) === "undefined") ? e.target : e.srcElement).index // Sometimes the index is not attached to the // event object. Find it by size. Hack for sure. if (e.target.index == undefined) { e.target.index = getIndexBySize(e.total); } var xhr = new XMLHttpRequest(), upload = xhr.upload, file = files[e.target.index], index = e.target.index, start_time = new Date().getTime(), boundary = '------multipartformboundary' + (new Date).getTime(), builder; newName = rename(file.name); mime = file.type if (typeof newName === "string") { builder = getBuilder(newName, e.target.result, mime, boundary); } else { builder = getBuilder(file.name, e.target.result, mime, boundary); } upload.index = index; upload.file = file; upload.downloadStartTime = start_time; upload.currentStart = start_time; upload.currentProgress = 0; upload.startData = 0; upload.addEventListener("progress", progress, false); xhr.open("POST", opts.url, true); xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary); xhr.sendAsBinary(builder); opts.uploadStarted(index, file, files_count); xhr.onload = function() { if (xhr.responseText) { var now = new Date().getTime(), timeDiff = now - start_time, result = opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff); filesDone++; // Remove from processing queue processingQueue.forEach(function(value, key) { if (value === fileIndex) processingQueue.splice(key, 1); }); // Add to donequeue doneQueue.push(fileIndex); if (filesDone == files_count - filesRejected) { afterAll(); } if (result === false) stop_loop = true; } }; } // Initiate the processing loop process(); } function getIndexBySize(size) { for (var i = 0; i < files_count; i++) { if (files[i].size == size) { return i; } } return undefined; } function rename(name) { return opts.rename(name); } function beforeEach(file) { return opts.beforeEach(file); } function afterAll() { return opts.afterAll(); } function dragEnter(e) { clearTimeout(doc_leave_timer); e.preventDefault(); opts.dragEnter(e); } function dragOver(e) { clearTimeout(doc_leave_timer); e.preventDefault(); opts.docOver(e); opts.dragOver(e); } function dragLeave(e) { clearTimeout(doc_leave_timer); opts.dragLeave(e); e.stopPropagation(); } function docDrop(e) { e.preventDefault(); opts.docLeave(e); return false; } function docEnter(e) { clearTimeout(doc_leave_timer); e.preventDefault(); opts.docEnter(e); return false; } function docOver(e) { clearTimeout(doc_leave_timer); e.preventDefault(); opts.docOver(e); return false; } function docLeave(e) { doc_leave_timer = setTimeout(function() { opts.docLeave(e); }, 200); } function empty() {} try { if (XMLHttpRequest.prototype.sendAsBinary) return; XMLHttpRequest.prototype.sendAsBinary = function(datastr) { function byteValue(x) { return x.charCodeAt(0) & 0xff; } var ords = Array.prototype.map.call(datastr, byteValue); var ui8a = new Uint8Array(ords); this.send(ui8a.buffer); } } catch (e) {} })(jQuery);