From 74c749554f46192b0d4424fe5371982d1e48f37c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 13 Apr 2015 12:38:53 -0400 Subject: put admin area on /admin --- themes/okadmin/templates/partials/tail.liquid | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'themes/okadmin/templates/partials/tail.liquid') diff --git a/themes/okadmin/templates/partials/tail.liquid b/themes/okadmin/templates/partials/tail.liquid index 88764a6..b3c575d 100644 --- a/themes/okadmin/templates/partials/tail.liquid +++ b/themes/okadmin/templates/partials/tail.liquid @@ -2,8 +2,8 @@ - - - - + + + + -- cgit v1.2.3-70-g09d2 From 1b2576bf18685a84053ba1ff7348076aa06ce851 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 30 Mar 2016 16:44:31 -0400 Subject: add progress bars --- examples/db.json | 20 +++++++- themes/okadmin/public/css/main.css | 27 +++++++++++ themes/okadmin/public/js/upload.js | 68 +++++++++++++++++++++++++++ themes/okadmin/templates/partials/tail.liquid | 1 + 4 files changed, 114 insertions(+), 2 deletions(-) (limited to 'themes/okadmin/templates/partials/tail.liquid') diff --git a/examples/db.json b/examples/db.json index c370864..bdad6c8 100644 --- a/examples/db.json +++ b/examples/db.json @@ -39,15 +39,31 @@ "id": "bagel", "title": "nice", "color": "blue", - "images": [], + "images": [ + { + "uri": "https://ltho.s3.amazonaws.com/229bcbc6-fb3c-428f-8c34-0c6bb69e70fd.gif", + "caption": "" + }, + { + "uri": "https://ltho.s3.amazonaws.com/a7663bfc-501c-4354-b6ed-6ea305a8fb39.gif", + "caption": "" + }, + { + "uri": "https://ltho.s3.amazonaws.com/7d380c24-7803-491a-94df-e812cbe667bb.gif", + "caption": "" + } + ], "video": { "url": "https://vimeo.com/112498725", "type": "vimeo", "token": "112498725", + "width": "", + "height": "", "title": "FW14-2H-VIDEO-V4 2", "thumb": "http://i.vimeocdn.com/video/497493142_640.jpg" }, - "__index": 1 + "__index": "1", + "dateCreated": "" }, { "type": "pumpernickel", diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index df0ca43..2f2d376 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -216,6 +216,7 @@ button, input[type=submit] { font-family: "Helvetica", sans-serif; } .main.resource form .group { + position: relative; display: block; float: left; width: 31em; @@ -361,6 +362,32 @@ button, input[type=submit] { color: red; } +.progress { + position: absolute; + top: 0; right: -100px; + padding: 10px 10px 0 10px; + margin: 0px; + width: 100px; + pointer-events: none; + background: #eee; + opacity: 0; + transition: opacity 0.3s; +} +.progress .xhr { + height: 10px; + background: black; + margin-bottom: 10px; + transition: all 0.2s; +} +.progress .xhr div { + background: white; + transition: all 0.2s; + height: 100%; +} +.progress.loading { + opacity: 1; +} + /* .remove { display: none; diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index 8d73dd5..cfc1199 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -4,6 +4,12 @@ var OKUpload = function(){ } OKUpload.prototype.bind = function(rapper){ var uploader = this + this.rapper = rapper + this.$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() @@ -34,9 +40,62 @@ OKUpload.prototype.handleFileSelect = function(e) { } } OKUpload.prototype.upload = function(f){ + this.xhrCount += 1 + + this.$progress.addClass("loading") + + var $loader = $("
") + var $loading_bar = $("
") + $loading_bar.css("width", "0%") + $loader.append( $loading_bar ) + this.$progress.append($loader) + var fd = new FormData() fd.append('image', f) + var request = new XMLHttpRequest() + request.open("POST", this.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 + "%") + } + } + 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("ERROR PARSING JSON") + } + } + console.log(arguments, request) + } + function transferError (data) { + this.loadCount += 1 + this.hideUploadBars() + console.log(arguments) + } + function transferAbort (data) { + this.loadCount += 1 + this.hideUploadBars() + console.log(arguments) + } + + request.send(fd) + +/* var request = $.ajax({ url: this.action, type: "post", @@ -46,6 +105,15 @@ OKUpload.prototype.upload = function(f){ 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) { diff --git a/themes/okadmin/templates/partials/tail.liquid b/themes/okadmin/templates/partials/tail.liquid index b3c575d..53823b0 100644 --- a/themes/okadmin/templates/partials/tail.liquid +++ b/themes/okadmin/templates/partials/tail.liquid @@ -1,4 +1,5 @@
{% comment %} closes container tag {% endcomment %} +
-- cgit v1.2.3-70-g09d2 From 6c09824946214db696beb59e34ce2e448d504abc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 5 Apr 2016 17:10:00 -0400 Subject: better max file size stuff --- app/index.js | 3 ++- app/node_modules/okservices/oks3/index.js | 34 +++++++++++++++++-------- app/node_modules/okservices/oks3/package.json | 2 +- examples/db.json | 8 +++++- examples/index.js | 10 +++----- package.json | 4 +-- themes/okadmin/public/js/app.js | 3 ++- themes/okadmin/public/js/upload.js | 36 +++++++++++++++++++++------ themes/okadmin/templates/partials/head.liquid | 2 +- themes/okadmin/templates/partials/tail.liquid | 4 +++ 10 files changed, 76 insertions(+), 30 deletions(-) (limited to 'themes/okadmin/templates/partials/tail.liquid') diff --git a/app/index.js b/app/index.js index 06b1591..d478a03 100644 --- a/app/index.js +++ b/app/index.js @@ -53,7 +53,8 @@ function OKCMS(options) { }, metaDefault, metaUser); var adminMeta = assign({ - static: withoutTrailingSlash(adminPath) + static: withoutTrailingSlash(adminPath), + services: options.services, }, metaDefault, metaUser); var schemaConfig = options.schemas || {}; diff --git a/app/node_modules/okservices/oks3/index.js b/app/node_modules/okservices/oks3/index.js index 97abef0..34c5840 100644 --- a/app/node_modules/okservices/oks3/index.js +++ b/app/node_modules/okservices/oks3/index.js @@ -4,6 +4,7 @@ var skipperS3 = require('skipper-s3') // Hack to prevent this god-forsaken module from crashing our shit var d = require('domain').create() d.on('error', function (err) { + console.log(err) console.error('Stupid error in S3 upload. Upload probably prematurely canceled') }) @@ -19,6 +20,12 @@ function OKS3(options) { if (!options.s3.audio) options.s3.audio = {} if (!options.s3.video) options.s3.video = {} +/* + // TODO: maxBytes property doesn't work - if you upload a large file, + // it will just hang until you reload the browser, and then CRASH. + + // Make sure maxbytes property is there - it can be a number, + // or zero/undefined (for no maximum upload size) if (options.s3.maxbytes) { if (! ('maxbytes' in options.s3.image)) options.s3.image.maxbytes = options.s3.maxbytes @@ -27,7 +34,14 @@ function OKS3(options) { if (! ('maxbytes' in options.s3.audio)) options.s3.audio.maxbytes = options.s3.maxbytes } - +*/ + if (options.s3.image.preserveFilename) + options.s3.image.preserveFilename = preserveFilename + if (options.s3.video.preserveFilename) + options.s3.video.preserveFilename = preserveFilename + if (options.s3.audio.preserveFilename) + options.s3.audio.preserveFilename = preserveFilename + var express = options.express; var router = express.Router(); @@ -38,22 +52,22 @@ function OKS3(options) { // provided by skipper. Use that to do AWS stuff router.post('/image', function(req, res) { d.run(function () { - req.file('image').upload({ + var skip = req.file('image').upload({ adapter: skipperS3, key: options.s3.key, secret: options.s3.secret, bucket: options.s3.bucket, dirname: options.s3.dirname, - maxBytes: options.s3.image.maxbytes, - saveAs: options.s3.image.preserveFilename && preserveFilename, + // maxBytes: options.s3.image.maxbytes, + saveAs: options.s3.image.preserveFilename, headers: { 'x-amz-acl': 'public-read' } }, function (err, uploadedFiles) { - if (err) res.status(500).send(err) + if (err) return res.status(500).send(err) res.json(uploadedFiles); }); - }); + }); }); router.post('/audio', function(req, res) { @@ -67,8 +81,8 @@ function OKS3(options) { secret: options.s3.secret, bucket: options.s3.bucket, dirname: options.s3.dirname, - maxBytes: options.s3.audio.maxbytes, - saveAs: options.s3.audio.preserveFilename && preserveFilename, + // maxBytes: options.s3.audio.maxbytes, + saveAs: options.s3.audio.preserveFilename, headers: { 'x-amz-acl': 'public-read' } @@ -90,8 +104,8 @@ function OKS3(options) { secret: options.s3.secret, bucket: options.s3.bucket, dirname: options.s3.dirname, - maxBytes: options.s3.video.maxbytes, - saveAs: options.s3.video.preserveFilename && preserveFilename, + // maxBytes: options.s3.video.maxbytes, + saveAs: options.s3.video.preserveFilename, headers: { 'x-amz-acl': 'public-read' } diff --git a/app/node_modules/okservices/oks3/package.json b/app/node_modules/okservices/oks3/package.json index 1d72a26..19a2d2a 100644 --- a/app/node_modules/okservices/oks3/package.json +++ b/app/node_modules/okservices/oks3/package.json @@ -9,7 +9,7 @@ "author": "OKFocus", "license": "None", "dependencies": { - "skipper": "^0.5.8", + "skipper": "^0.5.9", "skipper-s3": "^0.5.6" } } diff --git a/examples/db.json b/examples/db.json index 3650355..da7c19a 100644 --- a/examples/db.json +++ b/examples/db.json @@ -167,7 +167,13 @@ "title": "Blue", "__index": 2, "dateCreated": "Tue, 05 Apr 2016 15:17:54 GMT", - "media": [] + "media": [ + { + "uri": "https://ltho.s3.amazonaws.com/okcms-example/f2775199-d700-4b1f-951f-88fda599014e.png", + "caption": "", + "type": "image" + } + ] }, { "id": "green", diff --git a/examples/index.js b/examples/index.js index 147750e..57bce4b 100644 --- a/examples/index.js +++ b/examples/index.js @@ -41,12 +41,10 @@ var app = okcms.createApp({ secret: process.env.S3_SECRET, bucket: process.env.S3_BUCKET, dirname: "okcms-example", - allowVideoUploads: true, - allowAudioUploads: true, - preserveFilenames: true, - maxsize: 200, - maxsizeVideo: 150000000, - maxsizeAudio: 150000000, + // TODO: maxbytes stuff isn't working, need to change underlying module + image: { preserveFilename: false, maxbytes: 20000 }, + video: { preserveFilename: true, maxbytes: 0 }, + audio: { preserveFilename: true, maxbytes: 150000000 }, } }, diff --git a/package.json b/package.json index c3a7280..5caef74 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "okcms", - "version": "0.1.27", + "version": "0.1.26", "description": "great", "main": "app/index.js", "scripts": { @@ -8,7 +8,7 @@ "test": "echo \"Error: no test specified\" && exit 1" }, "author": "OKFocus", - "license": "None", + "license": "LNT", "dependencies": { "dotenv": "^1.1.0", "express": "^4.12.3", diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index a12f517..59fc6ae 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -40,7 +40,8 @@ var OKAdmin = function(){ var parent = this var uploader = new OKUpload () uploader.bind( this ) - uploader.add = function(url){ + uploader.add = function(media){ + var url = media.url var imageTemplate = $(".image-template", parent).html() var $el = $(imageTemplate) $el.find(".uri").val(url) diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index 6149424..44a34b5 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -1,8 +1,9 @@ var OKUpload = function(){ - this.action = this.imageAction = "/_services/s3/image" - this.videoAction = "/_services/s3/video" - this.audioAction = "/_services/s3/audio" + 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 @@ -42,29 +43,47 @@ OKUpload.prototype.handleFileSelect = function(e) { var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; for (var i = 0, f; f = files[i]; i++) { - if ( ! f.type.match('image.*') && ! f.type.match('video.*') ) { - continue; - } 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){ 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 this.$progress.addClass("loading") @@ -109,11 +128,13 @@ OKUpload.prototype.upload = function(f){ 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) @@ -147,6 +168,7 @@ OKUpload.prototype.success = function(data){ return } var url = data[0].extra.Location.replace(/%2F/, '\/') + console.log(url) this.parse(url) } OKUpload.prototype.add = function(media){ diff --git a/themes/okadmin/templates/partials/head.liquid b/themes/okadmin/templates/partials/head.liquid index 7ee4824..e9c27dc 100644 --- a/themes/okadmin/templates/partials/head.liquid +++ b/themes/okadmin/templates/partials/head.liquid @@ -10,4 +10,4 @@ {{meta.project}} Admin View Site -
+
\ No newline at end of file diff --git a/themes/okadmin/templates/partials/tail.liquid b/themes/okadmin/templates/partials/tail.liquid index 53823b0..522023b 100644 --- a/themes/okadmin/templates/partials/tail.liquid +++ b/themes/okadmin/templates/partials/tail.liquid @@ -1,5 +1,9 @@
{% comment %} closes container tag {% endcomment %}
+
-- cgit v1.2.3-70-g09d2