From 416c35ba1fcc7884f764c41ec588a6937c148184 Mon Sep 17 00:00:00 2001 From: "Dmitriy A. Golev" Date: Fri, 30 Oct 2015 06:16:20 +0300 Subject: [PATCH] Demo app enhancements --- demo/client/index.coffee | 47 +++----------------------------- demo/client/index.jade | 38 ++++++-------------------- demo/client/misc/_layout.jade | 3 ++ demo/client/styles.sass | 17 +++++++++--- demo/client/upload-form.coffee | 41 ++++++++++++++++++++++++++++ demo/client/upload-form.jade | 30 ++++++++++++++++++++ demo/lib/files.collection.coffee | 7 +++-- 7 files changed, 104 insertions(+), 79 deletions(-) create mode 100644 demo/client/upload-form.coffee create mode 100644 demo/client/upload-form.jade diff --git a/demo/client/index.coffee b/demo/client/index.coffee index 60683e3c..96579550 100644 --- a/demo/client/index.coffee +++ b/demo/client/index.coffee @@ -1,9 +1,7 @@ Meteor.startup -> Template.index.onCreated -> @take = new ReactiveVar 50 - @error = new ReactiveVar false @filesLength = new ReactiveVar 0 - @uploadInstance = new ReactiveVar false @getFilesLenght = => Meteor.call 'filesLenght', (error, length) => if error @@ -15,48 +13,11 @@ Meteor.startup -> @autorun => Meteor.subscribe 'latest', @take.get() Template.index.helpers - take: -> Template.instance().take.get() - error: -> Template.instance().error.get() - latest: -> Collections.files.collection.find {}, sort: 'meta.created_at': -1 - removedIn: -> moment(@meta.expireAt).fromNow() - filesLength: -> Template.instance().filesLength.get() - uploadInstance:-> Template.instance().uploadInstance.get() - + take: -> Template.instance().take.get() + latest: -> Collections.files.collection.find {}, sort: 'meta.created_at': -1 + removedIn: -> moment(@meta.expireAt).fromNow() + filesLength: -> Template.instance().filesLength.get() Template.index.events - 'click #pause': -> @pause() - 'click #continue': -> @continue() - 'click #abort': -> @abort() 'click #loadMore': (e, template) -> template.take.set template.take.get() + 50 - 'change input[name="userfile"]': (e, template) -> template.$('form#uploadFile').submit() - 'submit form#uploadFile': (e, template) -> - e.preventDefault() - template.error.set false - files = e.currentTarget.userfile.files - - unless files.length - template.error.set "Please select a file to upload" - return false - - done = false - created_at = +new Date - template.uploadInstance.set Collections.files.insert - file: files[0] - meta: {expireAt: new Date(created_at + _app.storeTTL), created_at, downloads: 0} - onUploaded: (error, fileObj) -> - done = true - unless error - Router.go 'file', _id: fileObj._id - else - template.error.set error.reason - e.currentTarget.userfile.value = '' - template.getFilesLenght() - template.uploadInstance.set false - onAbort: -> - done = true - template.uploadInstance.set false - e.currentTarget.userfile.value = '' - onBeforeUpload: -> if @size <= 100000 * 10 * 128 then true else "Max. file size is 128MB you've tried to upload #{filesize(@size)}" - streams: 8 - false diff --git a/demo/client/index.jade b/demo/client/index.jade index 3405ce86..f05c558f 100644 --- a/demo/client/index.jade +++ b/demo/client/index.jade @@ -1,32 +1,8 @@ template(name="index") .panel.panel-default - .panel-heading: h3.panel-title Upload File - .panel-body - .center-block - if error - .alert.alert-danger {{error}} - - if uploadInstance - +with uploadInstance - .progress - .progress-bar.progress-bar-striped.active(aria-valuemin="0" aria-valuemax="100" style="width: {{progress.get}}%") - .btn-group.btn-group-justified.control-btns - if onPause.get - button#continue.btn.btn-default.btn-lg(type="button" title="Resume upload") - i.fa.fa-lg.fa-play - else - button#pause.btn.btn-default.btn-lg(type="button" title="Pause upload") - i.fa.fa-lg.fa-pause - button#abort.btn.btn-default.btn-lg(type="button" title="Abort upload") - i.fa.fa-lg.fa-stop - else - form#uploadFile - input.btn.btn-default.btn-block(title="Select File" type="file" name="userfile" required) - p.text-center: small.help Any file-type. With size less or equal to 128MB - button.btn.btn-lg.btn-primary.btn-block(type="submit" title="Upload File"): i.fa.fa-lg.fa-cloud-download - - table.table.table-bordered(style="table-layout:fixed") - tbody + .panel-heading: h3.panel-title Recently uploaded files + if latest.count + table.table.table-bordered(style="table-layout:fixed"): tbody each latest tr td: a.ellipsis(href="{{pathFor 'file' _id=_id}}") #{name} @@ -39,7 +15,9 @@ template(name="index") span.label.label-default(title="Downloads") i.fa.fa-download | #{meta.downloads} + else + .panel-body.center: .alert.alert-info Be the first to upload a file - if compare filesLength '>' latest.count - .panel-footer - button.btn.btn-default.btn-block#loadMore(type="button" title="Show older files") Load More \ No newline at end of file + if compare filesLength '>' latest.count + .panel-footer + button.btn.btn-default.btn-block#loadMore(type="button" title="Show older files") Load More \ No newline at end of file diff --git a/demo/client/misc/_layout.jade b/demo/client/misc/_layout.jade index 33d9ce65..6ab9fb47 100644 --- a/demo/client/misc/_layout.jade +++ b/demo/client/misc/_layout.jade @@ -4,5 +4,8 @@ head template(name="_layout") a(href='https://github.com/VeliovGroup/Meteor-Files') img.gh-ribbon(src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png') + nav.navbar.navbar-default: .container-fluid + +uploadForm + .container: .row: .col-md-12 +yield \ No newline at end of file diff --git a/demo/client/styles.sass b/demo/client/styles.sass index b75a9612..1186e4d5 100644 --- a/demo/client/styles.sass +++ b/demo/client/styles.sass @@ -7,6 +7,11 @@ to opacity: 1 +.center + text-align: center + margin-right: auto + margin-left: auto + .container padding-top: 15px max-width: 640px @@ -32,10 +37,14 @@ th vertical-align: middle word-break: break-word -.control-btns > * - width: 50% !important -.panel-title - line-height: 22px +.navbar + table + width: 100% + .progress + min-width: 50vw + height: 28px + margin: 0px + .gh-ribbon position: absolute top: 0 diff --git a/demo/client/upload-form.coffee b/demo/client/upload-form.coffee new file mode 100644 index 00000000..c00bc728 --- /dev/null +++ b/demo/client/upload-form.coffee @@ -0,0 +1,41 @@ +Meteor.startup -> + Template.uploadForm.onCreated -> + @error = new ReactiveVar false + @uploadInstance = new ReactiveVar false + + Template.uploadForm.helpers + error: -> Template.instance().error.get() + uploadInstance:-> Template.instance().uploadInstance.get() + + Template.uploadForm.events + 'click #pause': -> @pause() + 'click #abort': -> @abort() + 'click #continue': -> @continue() + 'change input[name="userfile"]': (e, template) -> template.$('form#uploadFile').submit() + 'submit form#uploadFile': (e, template) -> + e.preventDefault() + template.error.set false + files = e.currentTarget.userfile.files + + unless files.length + template.error.set "Please select a file to upload" + return false + + done = false + created_at = +new Date + template.uploadInstance.set Collections.files.insert + file: files[0] + meta: {expireAt: new Date(created_at + _app.storeTTL), created_at, downloads: 0} + onUploaded: (error, fileObj) -> + done = true + unless error + Router.go 'file', _id: fileObj._id + else + template.error.set error.reason + template.uploadInstance.set false + onAbort: -> + done = true + template.uploadInstance.set false + onBeforeUpload: -> if @size <= 100000 * 10 * 128 then true else "Max. file size is 128MB you've tried to upload #{filesize(@size)}" + streams: 8 + false \ No newline at end of file diff --git a/demo/client/upload-form.jade b/demo/client/upload-form.jade new file mode 100644 index 00000000..a7cfe7fa --- /dev/null +++ b/demo/client/upload-form.jade @@ -0,0 +1,30 @@ +template(name="uploadForm") + form.navbar-form.center#uploadFile + if error + .alert.alert-danger {{error}} + + unless uploadInstance + .input-group + input.form-control.btn.btn-default(title="Select File" type="file" name="userfile" required) + span.input-group-btn + button.btn.btn-primary(type="submit" title="Upload File") + i.fa.fa-lg.fa-cloud-upload + | Upload + small.text-center.help-block Any file-type. With size less or equal to 128MB + + if uploadInstance + +with uploadInstance + table: tbody + tr + td + .btn-group + if onPause.get + button#continue.btn.btn-default.btn-sm(type="button" title="Resume upload") + i.fa.fa-fw.fa-play + else + button#pause.btn.btn-default.btn-sm(type="button" title="Pause upload") + i.fa.fa-fw.fa-pause + button#abort.btn.btn-default.btn-sm(type="button" title="Abort upload") + i.fa.fa-fw.fa-stop + td: .progress.center: .progress-bar.progress-bar-striped.active(aria-valuemin="0" aria-valuemax="100" style="width: {{progress.get}}%") + tr: td.center(colspan="2"): small.text-center.help-block(style="margin-bottom:0px") You are free to browse the site while upload in progress \ No newline at end of file diff --git a/demo/lib/files.collection.coffee b/demo/lib/files.collection.coffee index 2d741f5f..a35891cb 100644 --- a/demo/lib/files.collection.coffee +++ b/demo/lib/files.collection.coffee @@ -1,10 +1,11 @@ Collections.files = new Meteor.Files debug: false + throttle: 256*256*64 + chunkSize: 256*256*4 storagePath: 'assets/app/uploads/uploadedFiles' collectionName: 'uploadedFiles' - chunkSize: 256*256*8 - onBeforeUpload: -> if @size <= 100000 * 10 * 128 then true else "Max. file size is 128MB you've tried to upload #{filesize(@size)}" allowClientCode: false + onBeforeUpload: -> if @size <= 100000 * 10 * 128 then true else "Max. file size is 128MB you've tried to upload #{filesize(@size)}" downloadCallback: (fileObj) -> if @params?.query.download is 'true' Collections.files.collection.update fileObj._id, $inc: 'meta.downloads': 1 @@ -17,6 +18,8 @@ if Meteor.isServer Collections.files.collection._ensureIndex {'meta.expireAt': 1}, {expireAfterSeconds: 0, background: true} + Meteor.startup -> Collections.files.remove {} + Meteor.publish 'latest', (take = 50)-> check take, Number Collections.files.collection.find {}