Please see our experimental webrtc-data-channel branch. Feedback is highly appreciated!
- 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:
- Supporters
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
- Ask a question via Gitter chat
- Ask a question or submit an issue
- Releases / Changelog / History
- For more docs and examples read wiki
- Donate via PayPal
- Star on GitHub
- Star on Atmosphere
- Share on Facebook and Twitter
All PRs is always welcome on dev
branch. Please, always give expressive description to your changes and additions.
- pyfiles (meteor-python-files)) Python Client for Meteor-Files package
- meteor-autoform-file - Upload and manage files with autoForm
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 andDDP
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?
meteor add ostrio:files
import { FilesCollection } from 'meteor/ostrio:files';
- Where are files stored by default?: by default if
config.storagePath
isn't passed into Constructor it's equals toassets/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 rebuilds or you run
meteor reset
. To keep your storage persistent during development use an absolute path outside of your project folder, e.g./data
directory.
- On
production
:yourProdAppDir/programs/server
- How to pause/continue upload and get progress/speed/remaining time?: see Object returned from
insert
method - When using any of
accounts
packages - packageaccounts-base
must be explicitly added to.meteor/packages
aboveostrio:files
API overview (full API)
Read full docs for FilesCollection
Constructor
Shared code:
var Images = new FilesCollection({
collectionName: 'Images',
allowClientCode: false, // Disallow remove files from Client
onBeforeUpload: function (file) {
// Allow upload files under 10MB, and only in png/jpg/jpeg formats
if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.extension)) {
return true;
} 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 () {
return Images.find().cursor;
});
}
Read full docs for insert()
method
Upload form (template):
<template name="uploadForm">
{{#with currentUpload}}
Uploading <b>{{file.name}}</b>:
<span id="progress">{{progress.get}}%</span>
{{else}}
<input id="fileInput" type="file" />
{{/with}}
</template>
Shared code:
this.Images = new FilesCollection({collectionName: 'Images'});
Client's code:
Template.uploadForm.onCreated(function () {
this.currentUpload = new ReactiveVar(false);
});
Template.uploadForm.helpers({
currentUpload: function () {
return Template.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 selected
var upload = 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 dataURI
Images.insert({
file: 'data:image/png,base64str…',
isBase64: true, // <— Mandatory
fileName: 'pic.png' // <— Mandatory
});
// As plain base64:
Images.insert({
file: 'base64str…',
isBase64: true, // <— Mandatory
fileName: 'pic.png', // <— Mandatory
type: 'image/png' // <— Mandatory
});
For more expressive example see Upload demo app
To display files you can use fileURL
template helper or .link()
method of FileCursor
.
Template:
<template name='file'>
<img src="{{imageFile.link}}" alt="{{imageFile.name}}" />
<!-- Same as: -->
<!-- <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}" /> -->
<hr>
<video height="auto" controls="controls">
<source src="{{videoFile.link}}?play=true" type="{{videoFile.type}}" />
<!-- Same as: -->
<!-- <source src="{{fileURL videoFile}}?play=true" type="{{videoFile.type}}" /> -->
</video>
</template>
Shared code:
this.Images = new FilesCollection({collectionName: 'Images'});
this.Videos = new FilesCollection({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 () {
return Images.find().cursor;
});
Meteor.publish('files.videos.all', function () {
return Videos.find().cursor;
});
} else {
Meteor.subscribe('files.images.all');
Meteor.subscribe('files.videos.all');
}
Client's code:
Template.file.helpers({
imageFile: function () {
return Images.findOne();
},
videoFile: function () {
return Videos.findOne();
}
});
For more expressive example see Streaming demo app
Template:
<template name='file'>
<a href="{{file.link}}?download=true" download="{{file.name}}" target="_parent">
{{file.name}}
</a>
</template>
Shared code:
this.Images = new FilesCollection({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 () {
return Images.find().cursor;
});
} else {
Meteor.subscribe('files.images.all');
}
Client's code:
Template.file.helpers({
fileRef: function () {
return Images.findOne();
}
});
For more expressive example see Download demo
I would like to thank everyone who support this project. Because of those guys this project can have 100% of our attention.
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 |