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 or submit an issue
- Releases / Changelog / History
- For more docs and examples read wiki
- Wiki - Full documentation
- Why this package?
- Install
- API
cfs is a good package, but buggy as it's huge monster which combine everything. In Meteor-Files is nothing to broke, it's simply upload/store/retrieve files to/from server.
- You need store to GridFS, AWS or DropBox? (Use third-party storage) - Add it yourself
- You need to check file mime-type or extensions? (
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:filesRead full docs for Meteor.Files Constructor
Shared code:
var Images = new Meteor.Files({
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.ext)) {
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.collection.find({});
});
}Read full docs for insert() method
Upload form (template):
<template name="uploadForm">
{{#if currentFile}}
Uploading <b>{{currentFile.file.name}}</b>:
<span id="progress">{{progress}}%</span>
{{else}}
<input id="fileInput" type="file" />
{{/if}}
</template>Shared code:
this.Images = new Meteor.Files({collectionName: 'Images'});Client's code:
Template.uploadForm.onCreated(function () {
this.currentFile = new ReactiveVar(false);
});
Template.uploadForm.helpers({
currentFile: function () {
return Template.instance().currentFile.get();
},
progress: function () {
var _cf = Template.instance().currentFile.get();
if (_cf) {
return _cf.progress.get();
} else {
return 0;
}
},
});
Template.uploadForm.events({
'change #fileInput': function (e, template) {
if (e.currentTarget.files && e.currentTarget.files[0]) {
// We upload only one file, in case
// there was multiple files selected
var file = e.currentTarget.files[0];
template.currentFile.set(Images.insert({
file: file,
onUploaded: function (error, fileObj) {
if (error) {
alert('Error during upload: ' + error);
} else {
alert('File "' + fileObj.name + '" successfully uploaded');
}
template.currentFile.set(false);
},
streams: 'dynamic',
chunkSize: 'dynamic'
}));
}
}
});For more expressive example see demo app
To display files you will use fileURL template helper.
Template:
<template name='file'>
<img src="{{fileURL imageFile}}" alt="{{imageFile.name}}" />
<hr>
<video height="auto" controls="controls">
<source src="{{fileURL videoFile}}?play=true" type="{{videoFile.type}}" />
</video>
</template>Shared code:
this.Images = new Meteor.Files({collectionName: 'Images'});
this.Videos = new Meteor.Files({collectionName: 'Videos'});
// To have sample files in DB we will upload them on server 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.collection.find({});
});
Meteor.publish('files.videos.all', function () {
return Videos.collection.find({});
});
} else {
Meteor.subscribe('files.images.all');
Meteor.subscribe('files.videos.all');
}Client's code:
Template.file.helpers({
imageFile: function () {
return Images.collection.findOne({});
},
videoFile: function () {
return Videos.collection.findOne({});
}
});For more expressive example see demo app
Template:
<template name='file'>
<a href="{{fileURL fileRef}}?download=true" target="_parent" download>
{{fileRef.name}}
</a>
</template>Shared code:
this.Images = new Meteor.Files({collectionName: 'Images'});
// To have sample image in DB we will upload it on server 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.collection.find({});
});
} else {
Meteor.subscribe('files.images.all');
}Client's code:
Template.file.helpers({
fileRef: function () {
return Images.collection.findOne({});
}
});For more expressive example see demo app
| 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](https://twitter.com/share?url=https://github.com/VeliovGroup/Meteor-Files&text=File upload and delivery in Meteorjs - now it's easy!) about it or share at Facebook |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent