Meteor File Uploads

Question

I see that this has been asked here before, but nothing since Meteor.http has been available. I\'m still grasping the concepts of Meteor and file uploads are totall

Answer 1

Take a look at filepicker.io. They handle the upload, store it into your S3, and return to you the url that you can dump into your db.

1. Wget the filepicker script into your client folder.

   wget https://api.filepicker.io/v0/filepicker.js
   

2. Insert a filepicker input tag

   <input type="filepicker" id="attachment">
   

3. In the startup, initialize it:

   Meteor.startup( function() {
       filepicker.setKey("YOUR FILEPICKER API KEY");
       filepicker.constructWidget(document.getElementById('attachment'));
   });
   

4. Attach a event handler

   Template.templateNameHere.events({
       'change #attachment': function(evt){
           console.log(evt.files);
       }
   });
   

(I had posted on How would one handle a file upload with Meteor? Sorry. I'm new here. Is it kosher to copy the same answer twice? Anyone who knows better can feel free to edit this.)

Answer 2

well been playing a bit with meteor. Made a collectionFS a mix of meteor and gridFS (could be compatible). Test it here: http://collectionfs.meteor.com/ It support quit large files, multiple files, users etc. I've tested a 50Mb seems ok, if connection is lost or browser dies the user can resume upload. It should even be possible to have multiple users upload to exact same file - haven't quit found a usecase for it, but it's possible. Accounts, publishing etc. is as with collections - the test is in autopublish mode, though only meta data is avaliable - chunks of data is served in background via blobs.

I'll try getting it on github,

Answer 3

Checkout how to accomplish this using Meteor.Method on the server and the FileReader's api on the client

https://gist.github.com/dariocravero/3922137

After several searches, this looks to me the easiest (and for the moment the meteor's style way) to handle a file upload with no extra dependencies.

Answer 4

Since meteor includes JQuery by default, you can utilize a Jquery plugin for that, i presume, something like: https://github.com/blueimp/jQuery-File-Upload/wiki/Options can do the trick for you, and supports both GET and PUT.

Otherwise it would be a pain in the ass to get it to work, but not impossible, since you can access PUT in meteor.

If you would prefer a more pure JS sollution maybe you can look at: http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

And adapt it.

There is no ready made support for file uploads so share what you come up with, i would be very interested!

Answer 5

Alternatively (if you wouldn't like to use a 3rd party solution like filepicker) you could use the meteor router package.

This handles the HTTP requests on server-side.