diff options
Diffstat (limited to 'themes/okadmin/public/js/upload.js')
| -rw-r--r-- | themes/okadmin/public/js/upload.js | 225 |
1 files changed, 180 insertions, 45 deletions
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index d9fd5ed..6ff7ac9 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -1,56 +1,191 @@ -var OKUpload = { - action: "/_services/image", - - bind: function(){ - var el = document.getElementById("file") - if (! el) return - el.addEventListener("change", OKUpload.handleFileSelect) - }, +var OKUpload = function(){ + this.config = $("#uploadConfig").data() + this.imageAction = "/_services/s3/image" + this.videoAction = "/_services/s3/video" + this.audioAction = "/_services/s3/audio" +} +OKUpload.prototype.bind = function(rapper){ + var uploader = this + this.rapper = rapper + this.$progress = $("<div class='progress'>") + this.xhrCount = 0 + this.loadCount = 0 + + $(this.rapper).append(this.$progress) + $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) ) + $(".add-url", rapper).on("keydown blur", pressEnter( function(e){ + var url = $(this).val() + $(this).val("") + uploader.parse(url) + })) +} +OKUpload.prototype.parse = function(url){ + if (! url) return + var uploader = this + Parser.parse( url, function(media){ + console.log(url, media) + if (! media) { + alert("Not a valid link") + } + else if (media.type == "image") { + uploader.add(media) + } + else { + uploader.addMedia(media) + } + }) +} +OKUpload.prototype.handleFileSelect = function(e) { + e.stopPropagation(); + e.preventDefault(); - handleFileSelect: function(e) { - e.stopPropagation(); - e.preventDefault(); + var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; + for (var i = 0, f; f = files[i]; i++) { + this.upload(f) + } +} +OKUpload.prototype.largeFileError = function(file, maxSize) { + var your_bytes = bytesToString(file.size) + var max_bytes = bytesToString(maxSize) + alert("Sorry, your file is too big.\n\n" + file.name + "\n\nYour file: " + your_bytes + "\nMax size: " + max_bytes) + function bytesToString (n) { + if (n < 1024) return n + " bytes" + n /= 1024 + if (n < 1024) return n.toFixed(1) + " kb" + n /= 1024 + if (n < 1024) return n.toFixed(1) + " mb" + } +} +OKUpload.prototype.upload = function(f){ - for (var i = 0, f; f = files[i]; i++) { - if ( ! f.type.match('image.*')) { - continue; - } - OKUpload.upload(f) + var field, action + + if ( f.type.match('video.*') ) { + if (this.config.videoMaxbytes && f.size > this.config.videoMaxbytes) { + return this.largeFileError(f, this.config.videoMaxbytes) + } + field = 'video' + action = this.videoAction + } + else if ( f.type.match('audio.*') ) { + if (this.config.audioMaxbytes && f.size > this.config.audioMaxbytes) { + return this.largeFileError(f, this.config.audioMaxbytes) } - }, + field = 'audio' + action = this.audioAction + } + else { + if (this.config.imageMaxbytes && f.size > this.config.imageMaxbytes) { + return this.largeFileError(f, this.config.imageMaxbytes) + } + field = 'image' + action = this.imageAction || this.action + } + + this.xhrCount += 1 - upload: function(f){ - var fd = new FormData() - fd.append('image', f) + this.$progress.addClass("loading") - var request = $.ajax({ - url: OKUpload.action, - type: "post", - data: fd, - dataType: "json", - processData: false, - contentType: false, - }) - request.done(OKUpload.success) - }, + var $loader = $("<div class='xhr'>") + var $loading_bar = $("<div>") + $loading_bar.css("width", "0%") + $loader.append( $loading_bar ) + this.$progress.append($loader) - success: function(media){ - if (media.error) { - console.log(media.error) - return + var fd = new FormData() + fd.append(field, f) + + var request = new XMLHttpRequest() + request.open("POST", action, true) + + request.addEventListener("progress", updateProgress.bind(this)); + request.addEventListener("load", transferComplete.bind(this)); + request.addEventListener("error", transferError.bind(this)); + request.addEventListener("abort", transferAbort.bind(this)); + + function updateProgress (e) { + if (e.lengthComputable) { + var percentComplete = Math.round( 100 * e.loaded / e.total ) + $loading_bar.css("width", percentComplete + "%") } - OKUpload.add(media) - }, - - add: function(media){ - console.log(media) - }, - - error: function(error){ - throw error - }, + } + function transferComplete (data) { + this.loadCount += 1 + this.hideUploadBars() + if (request.readyState == 4 && request.status == 200) { + var responseData + try { + responseData = JSON.parse( request.responseText ) + this.success( responseData ) + } + catch (e) { + console.log(request.responseText) + console.log("ERROR PARSING JSON") + } + } + console.log(arguments, request) + } + function transferError (data) { + console.log("Transfer error") + this.loadCount += 1 + this.hideUploadBars() + console.log(arguments) + } + function transferAbort (data) { + console.log("Transfer aborted") + this.loadCount += 1 + this.hideUploadBars() + console.log(arguments) + } + request.send(fd) + +/* + var request = $.ajax({ + url: this.action, + type: "post", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + request.done(this.success.bind(this)) +*/ } +OKUpload.prototype.hideUploadBars = function () { + if (this.xhrCount == this.loadCount) { + this.$progress.removeClass("loading") + setTimeout(function(){ + this.$progress.empty() + }.bind(this), 300) + } +} +OKUpload.prototype.success = function(data){ + if (data.error) { + console.log(data.error) + return + } + var url = data.url + console.log(url) + this.parse(url) +} +OKUpload.prototype.add = function(media){ + console.log(media) +} +OKUpload.prototype.addMedia = function(media){ + console.log(media) +} +OKUpload.prototype.error = function(error){ + throw error +} + + +function pressEnter(fn){ + return function(e){ + if (e.keyCode && e.keyCode !== 13) return + e.preventDefault() + fn.apply(this) + } +}
\ No newline at end of file |