diff options
| -rw-r--r-- | js/cheesesteak.js | 96 | ||||
| -rw-r--r-- | js/pomf.js | 94 |
2 files changed, 96 insertions, 94 deletions
diff --git a/js/cheesesteak.js b/js/cheesesteak.js index 513573c..3447d97 100644 --- a/js/cheesesteak.js +++ b/js/cheesesteak.js @@ -25,6 +25,51 @@ // Lightweight EventEmitter implementation var EventEmitter = function() {}; + // Utility to convert bytes into human units + var humanSize = { + get: function humanSize() { + var units = [ + 'B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', + ]; + var base = Math.floor(Math.log(this.size) / Math.log(1024)); + return (this.size / Math.pow(1024, base)).toFixed(2) + ' ' + units[base]; + }, + }; + + var percentUploaded = { + get: function percentUploaded() { + return this.uploadedSize / this.size; + }, + }; + + // b gets merged as defaults for a + var merge = function merge(base, overlay) { + var out = base; + var key; + + for (key in overlay) { + if (typeof overlay[key] === 'object') { + out[key] = merge(base[key], overlay[key]); + } else { + out[key] = overlay[key]; + } + } + + return out; + }; + + var FileListUploader = function(url, files, opts) { + var request = opts || {}; + + this.url = url; + this.files = files; + this.opts = merge({ + field: 'files[]', + method: 'POST', + data: {}, + }, request); + }; + EventEmitter.prototype.on = function(evt, fn) { this._events = this._events || {}; this._events[evt] = this._events[evt] || []; @@ -70,24 +115,9 @@ }, }); - // Utility to convert bytes into human units - var humanSize = { - get: function humanSize() { - var units = [ - 'B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', - ]; - var base = Math.floor(Math.log(this.size) / Math.log(1024)); - return (this.size / Math.pow(1024, base)).toFixed(2) + ' ' + units[base]; - }, - }; Object.defineProperty(FileList.prototype, 'humanSize', humanSize); Object.defineProperty(File.prototype, 'humanSize', humanSize); - var percentUploaded = { - get: function percentUploaded() { - return this.uploadedSize / this.size; - }, - }; Object.defineProperty(FileList.prototype, 'percentUploaded', percentUploaded); Object.defineProperty(File.prototype, 'percentUploaded', percentUploaded); @@ -110,52 +140,24 @@ window.URL.revokeObjectURL(url); }; - // b gets merged as defaults for a - var merge = function merge(base, overlay) { - var out = base; - for (var key in overlay) { - if (typeof overlay[key] === 'object') { - out[key] = merge(base[key], overlay[key]); - } else { - out[key] = overlay[key]; - } - } - - return out; - }; - - var FileListUploader = function(url, files, opts) { - this.url = url; - this.files = files; - - var request = opts || {}; - - this.opts = merge({ - field: 'files[]', - method: 'POST', - data: {}, - }, request); - }; - FileListUploader.prototype = Object.create(EventEmitter.prototype); FileListUploader.prototype.upload = function(cb) { var opts = this.opts; var files = this.files; var _this = this; var len = files.length; + var data = new FormData(); + var xhr = new XMLHttpRequest(); var i; if (cb) { this.on('uploadcomplete', cb); } - var data = new FormData(); files.forEach(function(file) { data.append(opts.field, file); }); - var xhr = new XMLHttpRequest(); - xhr.open(opts.method, this.url, true); function initProgressBar(evt) { @@ -166,8 +168,10 @@ xhr.upload.addEventListener('loadstart', initProgressBar); function updateProgressBar(evt) { + var size; + if (evt.lengthComputable) { - var size = evt.loaded; + size = evt.loaded; /** * We know the size of the files, the order they're in, and how @@ -29,36 +29,6 @@ $(function() { var $btnContent = ''; - if (!$.hasFileAPI()) { - $('#no-file-api').show(); - $uploadBtn.hide(); - } - - $uploadBtn.cabinet($uploadInput); - - $uploadBtn.on('dragenter', function(evt) { - if (this === evt.target) { - $(this).addClass('drop'); - $btnContent = $(this).html(); - $(this).html('Drop it here~'); - } - }); - - $uploadBtn.on('drop', function() { - $(this).trigger('dragleave'); - }); - - $uploadBtn.on('dragleave', function(evt) { - var node = evt.target; - do { - if (node === this) { - $(this).removeClass('drop'); - $(this).html($btnContent); - break; - } - } while (node === node.parentNode); - }); - var MAX_SIZE = (function(node) { var max = node.attr('data-max-size') || '120MiB'; var num = parseInt(/([0-9,]+).*/.exec(max)[1].replace(',', ''), 10); @@ -92,41 +62,68 @@ $(function() { return $rowItem; }; - $uploadBtn.on('change', function() { - $uploadFiles.empty().removeClass('error completed'); + if (!$.hasFileAPI()) { + $('#no-file-api').show(); + $uploadBtn.hide(); + } - var files = $uploadInput[0].filelist; + $uploadBtn.cabinet($uploadInput); - files.forEach(function(file) { - createRow(file.name, file.humanSize).appendTo($uploadFiles); - }); + $uploadBtn.on('dragenter', function(evt) { + if (this === evt.target) { + $(this).addClass('drop'); + $btnContent = $(this).html(); + $(this).html('Drop it here~'); + } + }); - var totalRow = createRow('', files.humanSize, 'total'); - totalRow.appendTo($uploadFiles); + $uploadBtn.on('drop', function() { + $(this).trigger('dragleave'); + }); - var $totalName = $('.file-name', totalRow); + $uploadBtn.on('dragleave', function(evt) { + var node = evt.target; + do { + if (node === this) { + $(this).removeClass('drop'); + $(this).html($btnContent); + break; + } + } while (node === node.parentNode); + }); + $uploadBtn.on('change', function() { + var files = $uploadInput[0].filelist; + var totalRow = createRow('', files.humanSize, 'total'); + var $totalName = $('.file-name', totalRow); var UPLOAD_ERR_MAX_SIZE = 'onii-chan y-your upload is t-too big…'; var UPLOAD_ERR_FAILED = 'Something went wrong; try again later.'; - - if (files.size > MAX_SIZE) { - $uploadFiles.addClass('error'); - $totalName.html(UPLOAD_ERR_MAX_SIZE); - return; - } - var up = files.upload('upload.php'); var eachRow = function(files, fn) { var hits = {}; files.forEach(function(file) { - ++hits[file.name]; var row = $($('li[data-filename="' + escape(file.name) + '"]')[hits[file.name] || 0]); + ++hits[file.name]; fn.call(row, row, file, files); }); }; + $uploadFiles.empty().removeClass('error completed'); + + files.forEach(function(file) { + createRow(file.name, file.humanSize).appendTo($uploadFiles); + }); + + totalRow.appendTo($uploadFiles); + + if (files.size > MAX_SIZE) { + $uploadFiles.addClass('error'); + $totalName.html(UPLOAD_ERR_MAX_SIZE); + return; + } + up.on('uploadprogress', function(evt, files) { eachRow(files, function(row, file, files) { $('.progress-inner', row).width((file.percentUploaded * 100) + '%'); @@ -141,9 +138,10 @@ $(function() { }); up.on('load', function(evt, response) { + var res = JSON.parse(response); + switch (evt.target.status) { case 200: - var res = JSON.parse(response); if (!res.success) { $uploadFiles.addClass('error'); $totalName.text(UPLOAD_ERR_FAILED); |