File Uploader Part 8: Reactive upload progress

In this episode I'll enhance the file upload package to include a reactive progress indicator

Good job! That's it for "File Uploader Part 8: Reactive upload progress."

Need a second look? Watch again

File Uploader Part 8: Reactive upload progress

In this episode I'll enhance the file upload package to include a reactive progress indicator. I'll track read progress (on the browser) and upload progress (to the server) so that we can display a progress indicator widget.

  • Meteor
  • Tutorial
**Related lessons:** * <a href="http://www.eventedmind.com/posts/meteor-build-a-file-upload-package">Build a File Upload Package</a> * <a href="http://www.eventedmind.com/posts/meteor-file-uploader-part-2-server-side-save">File Uploader Part 2: Server Side Save</a> * <a href="http://www.eventedmind.com/posts/meteor-file-uploader-part-3-using-packages-from-github">File Uploader Part 3: Using Packages from GitHub</a> * <a href="https://www.eventedmind.com/feed/meteor-file-uploader-part-4-publishing-packages-with-meteorite-and-atmosphere">File Uploader Part 4: Publishing Packages with Meteorite and Atmosphere</a> * <a href="http://www.eventedmind.com/posts/meteor-file-uploader-part-5-streaming-reads">File Uploader Part 5: Streaming Reads</a> * <a href="http://www.eventedmind.com/posts/meteor-file-uploader-part-6-streaming-uploads">File Uploader Part 6: Streaming Uploads</a> * <a href="http://www.eventedmind.com/posts/meteor-file-uploader-part-7-streaming-writes">File Uploader Part 7: Streaming Writes</a> * <a href="https://www.eventedmind.com/feed/meteor-file-uploader-part-9-build-a-ui-component" target="_blank">File Uploader Part 9: Build a UI Component</a> <p class="code-block-title">app.js</p> ```javascript if (Meteor.isClient) { Files = new Meteor.Collection(null); Template.fileUpload.events({ 'change input[type=file]': function (e, tmpl) { var input = tmpl.find('input[type=file]'); var files = input.files; var file; var mFile; for (var i = 0; i < files.length; i++) { mFile = new MeteorFile(files[i], { collection: Files }); Files.insert(mFile, function (err, res) { mFile.upload(files[i], "uploadFile"); }); } } }); Template.fileUpload.helpers({ files: function () { return Files.find(); } }); Template.fileUploadRow.helpers({ uploadCompleteClass: function () { return this.uploadProgress == 100 ? 'progress-success' : ''; } }); } if (Meteor.isServer) { Meteor.methods({ uploadFile: function (file) { file.save('/Users/cmather/tmp/uploads/'); } }); } ``` <p class="code-block-title">app.html</p> ```html <head> <title>File Upload Progress</title> </head> <body> <div style="margin: 10px 0px;"></div> <div class="container"> {{> fileUpload}} </div> </body> <template name="fileUpload"> <form class="well"> <legend> <h3>Upload Files</h3> </legend> <input type="file" multiple /> <table class="table"> <thead> <th>Name</th> <th>Size</th> <th style="width: 150px;">Upload Progress</th> <th style="width: 300px;">Status</th> </thead> <tbody> {{#each files}} {{> fileUploadRow}} {{else}} <tr><td colspan="4"><h5>No files selected</h5></td></tr> {{/each}} </tbody> </table> </form> </template> <template name="fileUploadRow"> <tr> <td>{{name}}</td> <td>{{size}}</td> <td> <div class="progress progress-striped {{uploadCompleteClass}}"> <div class="bar" style="width: {{uploadProgress}}%"> <span style="padding: 2px; float: left; color: #000;"> {{uploadProgress}}% </span> </div> </div> </td> <td>{{status}}</td> </tr> </template> ```
Join the Discussion

Want to leave a comment? .