Demo app enhancements

veliovgroup · Oct 30, 2015 · 416c35b · 416c35b
1 parent 53ede40
commit 416c35b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 79 deletions.
diff --git 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
@@ -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
+  if compare filesLength '>' latest.count
+    .panel-footer
+      button.btn.btn-default.btn-block#loadMore(type="button" title="Show older files") Load More
diff --git 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
diff --git 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
@@ -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
diff --git a/demo/client/upload-form.jade 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
diff --git 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 {}