How can I process a file using Meteor?

Question

What will be the canonical way to handle file uploads using Meteor?

Answer 1

Currently, there seems to be no way to interact with the HTTP server or anything related to HTTP.

The only thing you can do is talk to the server using the RPC methods set by Meteor.methods, or talk to mongoDB directly on the open mongoDB file.

Answer 2

I used http://filepicker.io . They download the file, save it in S3 and return you the URL where the file is located. Then I just paste the URL into the database.

• Run the script icon file in the client folder.

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

• Insert filepicker input tag

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

• At startup, initialize it:

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

• Attach an event handler

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

Answer 3

For images, I use a method similar to Dario's , except that I do not write the file to disk. I store data directly in the database as a model field. This works for me because I only need to support browsers that support the HTML5 File API . And I need simple image support.

 Template.myForm.events({ 'submit form': function(e, template) { e.preventDefault(); var file = template.find('input type=["file"]').files[0]; var reader = new FileReader(); reader.onload = function(e) { // Add it to your model model.update(id, { $set: { src: e.target.result }}); // Update an image on the page with the data $(template.find('img')).attr('src', e.target.result); } reader.readAsDataURL(file); } }); 

Answer 4

I just came up with a file upload implementation using Meteor.methods and the HTML5 file API. Let me know what you think Darío

Answer 5

A new package will appear: edgee: slingshot . It does not upload files to your meteorite server, but it’s better, since it allows the meteorite server to focus on its main goal - to serve the meteorite application instead of processing expensive file transfers.

Instead, it uploads files to cloud storage services. It currently supports AWS S3 and Google Cloud Files, but it will also support Rackspace and possibly Cloudinary cloud storage files in the future.

Your meteorite server just acts as a coordinator.

It is also a very versatile and lightweight package.

Answer 6

There is an atmosphere package called router that allows just that.

Actually the best way to handle file uploads is now collectionFS

Answer 7

Here is the best solution for this time. It uses collectionFS .

 meteor add cfs:standard-packages meteor add cfs:filesystem 

Client:

 Template.yourTemplate.events({ 'change .your-upload-class': function(event, template) { FS.Utility.eachFile(event, function(file) { var yourFile = new FS.File(file); yourFile.creatorId = Meteor.userId(); // add custom data YourFileCollection.insert(yourFile, function (err, fileObj) { if (!err) { // do callback stuff } }); }); } }); 

Server:

 YourFileCollection = new FS.Collection("yourFileCollection", { stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})] }); YourFileCollection.allow({ insert: function (userId, doc) { return !!userId; }, update: function (userId, doc) { return doc.creatorId == userId }, download: function (userId, doc) { return doc.creatorId == userId } }); 

Template:

 <template name="yourTemplate"> <input class="your-upload-class" type="file"> </template> 

Answer 8

You can try downloading directly to amazon S3, doing some tricks with js bootloaders, etc. http://aws.amazon.com/articles/1434

Answer 9

If you do not need significantly large files, or perhaps only storing files for a short period of time, then this simple solution works very well.

In your html ...

 <input id="files" type="file" /> 

In your template event map ...

 Template.template.events({ 'submit': function(event, template){ event.preventDefault(); if (window.File && window.FileReader && window.FileList && window.Blob) { _.each(template.find('#files').files, function(file) { if(file.size > 1){ var reader = new FileReader(); reader.onload = function(e) { Collection.insert({ name: file.name, type: file.type, dataUrl: reader.result }); } reader.readAsDataURL(file); } }); } } }); 

Subscribe to the collection and visualize the link in the template ...

 <a href="{{dataUrl}}" target="_blank">{{name}}</a> 

Although this may not be the most reliable or elegant solution for large files or an application with an intensive file, it works great for all types of file formats if you want to implement simple file upload and download / rendering.

Answer 10

On the meteor roadmap, you can see that the “Download File” function is scheduled for “After 1.0”. Therefore, we need to wait to see the official path.

Currently, one of the best ways is to use "collectionFS" (this is a preview of version 0.3.x at time of writing).

Or inkfilepicker (e.g. filepicker.io) as suggested here. It is quite simple to use, although it obviously requires an Internet connection by the user.

If you just need to play, you can use the html5 function. Something like that .

Answer 11

To follow the same steps as the most revised answer, without the cost of filepicker.io, follow the instructions for this package: https://github.com/Lepozepo/S3

Then, to get the link, use a code similar to the one below. Finally, plug in the URL returned by secureLink to the database.

 Template.YourTemplate.events({ "click button.upload": function() { var files = $("input.file_bag")[0].files; S3.upload(files, "/subfolder", function(e,r) { console.log(r); Session.set('secureLink', r.secure_url); }) } }); 

 Template.YourTemplate.helpers({ "files": function() { return S3.collection.find(); }, "secureLink": function() { return Session.get('secureLink'); } }); 

Answer 12

here is another solution:

https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/

This uses the Blueimp download solution, which supports downloaded downloads, progress bars, and more.