File Uploader Part 9: Build a UI Component

The Meteor UI Component framework isn't finished yet

Good job! That's it for "File Uploader Part 9: Build a UI Component."

Need a second look? Watch again

File Uploader Part 9: Build a UI Component

The Meteor UI Component framework isn't finished yet. But that doesn't mean we can't build our own simple UI components. In this episode I'll add a UI component to the file uploader that automatically handles events, and allows us to show an upload progress table.

  • 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="http://www.eventedmind.com/posts/meteor-file-uploader-part-8-reactive-upload-progress">File Uploader Part 8: Reactive Upload Progress</a> <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> {{#FileUploader method="uploadFile" size="1024*1024*5"}} <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> {{/FileUploader}} </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? .