{"action":"created","issue":{"url":"https://api.github.com/repos/CulturalMe/meteor-slingshot/issues/52","labels_url":"https://api.github.com/repos/CulturalMe/meteor-slingshot/issues/52/labels{/name}","comments_url":"https://api.github.com/repos/CulturalMe/meteor-slingshot/issues/52/comments","events_url":"https://api.github.com/repos/CulturalMe/meteor-slingshot/issues/52/events","html_url":"https://github.com/CulturalMe/meteor-slingshot/issues/52","id":54752166,"number":52,"title":"Progress bar question","user":{"login":"centinel3","id":199507,"avatar_url":"https://avatars.githubusercontent.com/u/199507?v=3","gravatar_id":"","url":"https://api.github.com/users/centinel3","html_url":"https://github.com/centinel3","followers_url":"https://api.github.com/users/centinel3/followers","following_url":"https://api.github.com/users/centinel3/following{/other_user}","gists_url":"https://api.github.com/users/centinel3/gists{/gist_id}","starred_url":"https://api.github.com/users/centinel3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/centinel3/subscriptions","organizations_url":"https://api.github.com/users/centinel3/orgs","repos_url":"https://api.github.com/users/centinel3/repos","events_url":"https://api.github.com/users/centinel3/events{/privacy}","received_events_url":"https://api.github.com/users/centinel3/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-19T11:18:59Z","updated_at":"2015-01-20T01:02:14Z","closed_at":null,"body":"When using the progress bar I'm running into an issue when I use this as a template. I have copied and pasted in the exact code you have on github. Then I'm including it as a template within my main page `{{progressBar}}`.\r\n\r\nI'm getting:\r\n```\r\nException in template helper: TypeError: Cannot read property 'progress' of undefined\r\n```\r\n\r\nIt looks to me that it's not realizing the uploader instance. I've tried moving the upload constructor to the Template.myPage.render function (as well as some other things) and am not able to figure it out. \r\n\r\nAny help would be appreciate with this. Thank you in advance! -Chris\r\n\r\nCurrently I have the code within my form submit function:\r\n\r\n```JavasCRIPT\r\nTemplate.imagesSubmitTpl.events({\r\n  'submit form': function(e, template) {\r\n    e.preventDefault();\r\n    \r\n    // Saving to Amazon S3\r\n    var metaContext = {\r\n      projectId: this._id\r\n    }\r\n\r\n    var uploader = new Slingshot.Upload(\"imagesCleaved\", metaContext);\r\n\r\n    uploader.send(document.getElementById('imageUpload-js').files[0], function (error, downloadUrl) {\r\n      // Client-side error handling\r\n      if (error) {\r\n        console.error(error);\r\n      }\r\n\r\n      // Saving to the DocumentsCollection in Mongodb (upon successful save to Amazon S3)\r\n      // Stripping out the full file path and saving only the image name itself\r\n      var imageInput = $(e.target).find('#imageUpload-js').val();\r\n      var imageFileName = imageInput.split('\\\\').pop().split('/').pop();\r\n      \r\n      var images = {\r\n        projectId: template.data._id,\r\n        imageFileName: imageFileName,\r\n        imageName: $(e.target).find('[name=imageName-js]').val(),\r\n        imageUrl: downloadUrl,\r\n        imageNote: $(e.target).find('[name=imageNote-js]').val()\r\n      };\r\n\r\n      Meteor.call('imagesInsert', images, function(error, result){\r\n        if (error){\r\n          return alert(error.reason);\r\n        }\r\n\r\n        //Clear form\r\n        $('#upload-images-entry-js')[0].reset();\r\n      });\r\n    });\r\n  }\r\n});\r\n```\r\n\r\nProgress bar code:\r\nI'm including your code as a template, unmodified at the moment."},"comment":{"url":"https://api.github.com/repos/CulturalMe/meteor-slingshot/issues/comments/70587868","html_url":"https://github.com/CulturalMe/meteor-slingshot/issues/52#issuecomment-70587868","issue_url":"https://api.github.com/repos/CulturalMe/meteor-slingshot/issues/52","id":70587868,"user":{"login":"gsuess","id":1558575,"avatar_url":"https://avatars.githubusercontent.com/u/1558575?v=3","gravatar_id":"","url":"https://api.github.com/users/gsuess","html_url":"https://github.com/gsuess","followers_url":"https://api.github.com/users/gsuess/followers","following_url":"https://api.github.com/users/gsuess/following{/other_user}","gists_url":"https://api.github.com/users/gsuess/gists{/gist_id}","starred_url":"https://api.github.com/users/gsuess/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gsuess/subscriptions","organizations_url":"https://api.github.com/users/gsuess/orgs","repos_url":"https://api.github.com/users/gsuess/repos","events_url":"https://api.github.com/users/gsuess/events{/privacy}","received_events_url":"https://api.github.com/users/gsuess/received_events","type":"User","site_admin":false},"created_at":"2015-01-20T01:02:14Z","updated_at":"2015-01-20T01:02:14Z","body":"I don't see how you could possible access the uploaders progress bars from your template's helpers, since `uploader` only lives in the scope of your submit for event handler.\r\n\r\nCheckout this example:\r\n\r\n\r\n```JavaScript\r\nvar uploader = new ReactiveVar();\r\n\r\nTemplate.upload.helpers({\r\n\r\n    isUploading: function () {\r\n        return Boolean(uploader.get());\r\n    },\r\n\r\n    progress: function () {\r\n        var upload = uploader.get();\r\n        if (upload)\r\n            return Math.round(upload.progress() * 100);\r\n    }\r\n});\r\n\r\nTemplate.upload.events({\r\n    \"submit .form\": function (event, template) {\r\n        var upload = new Slingshot.Upload(\"imagesCleaved\"),\r\n              file = template.find(\"#imageUpload-js\").files[0];\r\n        if (file) {\r\n            upload.send(file, function (error, url) {\r\n                uploader.set();\r\n\r\n                if (error) {\r\n                    alert(error.message);\r\n                }\r\n                else {\r\n                    //TODO Call your method here\r\n                }\r\n            });\r\n        }\r\n\r\n        uploader.set(upload);\r\n    }\r\n});\r\n\r\n```\r\n "}}