Please see our experimental webrtc-data-channel branch. Feedback is highly appreciated!

ToC:

• Wiki - Full documentation
• About this package
• 3rd-party storage integration examples - AWS S3, DropBox, GridFS and Google Storage
• Help / Support
• Support the MF project
• Contribution
• Awards
• See MF in action - Demo application
• Related Packages
• Why this package?
• Installation
• ES6 Import
• FAQ
• API:
  • Initialize Collection
  • Upload file
  • Stream files
  • Download Button
• Supporters

Files for Meteor

Award winning, extremely fast and robust package for file uploading, managing and streaming (Audio & Video & Images), with support of server's file system (FS) or third party storage, like: AWS, DropBox, Google Storage, Google Drive, GridFS or any other with API.

Upload, Download, Serve and Stream files within your Meteor application. Without system dependencies, try demo app, which works smoothly on free/sandbox Heroku plan, one click Heroku deploy

Support:

• Ask a question via Gitter chat
• Ask a question or submit an issue
• Releases / Changelog / History
• For more docs and examples read wiki

Support Meteor-Files project:

• Donate via PayPal
• Star on GitHub
• Star on Atmosphere
• Share on Facebook and Twitter

Contribution:

All PRs is always welcome on dev branch. Please, always give expressive description to your changes and additions.

Awards:

Demo application:

• Live
• Source
• Compiled Demo App
• 

Related Packages:

• pyfiles (meteor-python-files)) Python Client for Meteor-Files package
• meteor-autoform-file - Upload and manage files with autoForm

Why Meteor-Files?

The cfs is a well known package, but it's huge monster which combines everything. In Meteor-Files is nothing to broke, it's simply upload/store/serve files to/from server.

• Support for HTTP, RTC/DC and DDP transports for upload, read about difference
• You need store to GridFS, AWS S3, Google Storage or DropBox? (Use 3rd-party storage) - Add it yourself
• You need to check file mime-type, size or extension? (onBeforeUpload) - Add it yourself
• You need to resize images after upload? (onAfterUpload, file's subversions) - Add it yourself

Easy-peasy kids, yeah?

Installation:

meteor add ostrio:files

ES6 Import:

import{FilesCollection}from'meteor/ostrio:files';

FAQ:

1. Where files is stored by default?: by default if config.storagePath isn't passed into Constructor it's equals to assets/app/uploads and relative to running script:

• On development stage: yourDevAppDir/.meteor/local/build/programs/server, note: all files will be removed as soon as your application will rebuild or you run meteor reset. To keep you storage persistent use absolute path outside of your project folder, we recommend to use /data directory
• On production: yourProdAppDir/programs/server

2. How to pause/continue upload and get progress/speed/remaining time?: see Object returned from insert method
3. When using any of accounts packages - package accounts-base must be explicitly added to .meteor/packages above ostrio:files

API overview (full API)

new FilesCollection([config]) [Isomorphic]

Read full docs for FilesCollection Constructor

Shared code:

varImages=newFilesCollection({collectionName: 'Images',allowClientCode: false,// Disallow remove files from ClientonBeforeUpload: function(file){// Allow upload files under 10MB, and only in png/jpg/jpeg formatsif(file.size<=10485760&&/png|jpg|jpeg/i.test(file.extension)){returntrue;}else{return'Please upload image, with size equal or less than 10MB';}}});if(Meteor.isClient){Meteor.subscribe('files.images.all');}if(Meteor.isServer){Meteor.publish('files.images.all',function(){returnImages.find().cursor;});}

insert(settings[, autoStart]) [Client]

Read full docs for insert() method

Upload form (template):

<templatename="uploadForm">
{{#with currentUpload}}
Uploading <b>{{file.name}}</b>: <spanid="progress">{{progress.get}}%</span>
{{else}}
<inputid="fileInput" type="file" />
{{/with}}
</template>

Shared code:

this.Images=newFilesCollection({collectionName: 'Images'});

Client's code:

Template.uploadForm.onCreated(function(){this.currentUpload=newReactiveVar(false);});Template.uploadForm.helpers({currentUpload: function(){returnTemplate.instance().currentUpload.get();}});Template.uploadForm.events({'change #fileInput': function(e,template){if(e.currentTarget.files&&e.currentTarget.files[0]){// We upload only one file, in case // multiple files were selectedvarupload=Images.insert({file: e.currentTarget.files[0],streams: 'dynamic',chunkSize: 'dynamic'},false);upload.on('start',function(){template.currentUpload.set(this);});upload.on('end',function(error,fileObj){if(error){alert('Error during upload: '+error);}else{alert('File "'+fileObj.name+'" successfully uploaded');}template.currentUpload.set(false);});upload.start();}}});

Upload base64 string (introduced in v1.7.1):

// As dataURIImages.insert({file: 'data:image/png,base64str…',isBase64: true,// <— MandatoryfileName: 'pic.png'// <— Mandatory});// As plain base64:Images.insert({file: 'base64str…',isBase64: true,// <— MandatoryfileName: 'pic.png',// <— Mandatorytype: 'image/png'// <— Mandatory});

For more expressive example see Upload demo app

Stream files

To display files you can use fileURL template helper or .link() method of FileCursor.

Template:

<templatename='file'><imgsrc="{{imageFile.link}}" alt="{{imageFile.name}}" /><!-- Same as: --><!-- <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}" /> --><hr><videoheight="auto" controls="controls"><sourcesrc="{{videoFile.link}}?play=true" type="{{videoFile.type}}" /><!-- Same as: --><!-- <source src="{{fileURL videoFile}}?play=true" type="{{videoFile.type}}" /> --></video></template>

Shared code:

this.Images=newFilesCollection({collectionName: 'Images'});this.Videos=newFilesCollection({collectionName: 'Videos'});// Upload sample files on server's startup:if(Meteor.isServer){Meteor.startup(function(){Images.load('https://raw.githubusercontent.com/VeliovGroup/Meteor-Files/master/logo.png',{fileName: 'logo.png'});Videos.load('http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_5mb.mp4',{fileName: 'Big-Buck-Bunny.mp4'});});Meteor.publish('files.images.all',function(){returnImages.find().cursor;});Meteor.publish('files.videos.all',function(){returnVideos.find().cursor;});}else{Meteor.subscribe('files.images.all');Meteor.subscribe('files.videos.all');}

Client's code:

Template.file.helpers({imageFile: function(){returnImages.findOne();},videoFile: function(){returnVideos.findOne();}});

For more expressive example see Streaming demo app

Download button

Template:

<templatename='file'><ahref="{{file.link}}?download=true" download="{{file.name}}" target="_parent">
{{file.name}}
</a></template>

Shared code:

this.Images=newFilesCollection({collectionName: 'Images'});// Load sample image into FilesCollection on server's startup:if(Meteor.isServer){Meteor.startup(function(){Images.load('https://raw.githubusercontent.com/VeliovGroup/Meteor-Files/master/logo.png',{fileName: 'logo.png',meta: {}});});Meteor.publish('files.images.all',function(){returnImages.find().cursor;});}else{Meteor.subscribe('files.images.all');}

Client's code:

Template.file.helpers({fileRef: function(){returnImages.findOne();}});

For more expressive example see Download demo

Supporters:

I would like to thank everyone who support this project. Because of those guys this project can have 100% of our attention.

• @Neobii
• @themeteorchef
• @MeDBejoHok
• @martunta

---

Meteor-Files	Expressive package to manage files within Meteor
	If you found this package useful, please do not hesitate to star it at both GitHub and Atmosphere. Also you may like to Tweet about it or share at Facebook