Files for Meteor.js

Stable, fast, robust, and well-maintained Meteor.js package for files management using MongoDB Collection API. What does exactly this means? Calling .insert() method would initiate a file upload and then insert new record into collection. Calling .remove() method would erase stored file and record from MongoDB Collection. And so on, no need to learn new APIs. It's flavored with extra low-level methods like .unlink() and .write() for complex integrations.

Key features

Compatible with all front-end frameworks from Blaze to React
Upload via HTTP and DDP transports, read about difference
Sustainable and "resumable" uploads will resume upon connection interruption or server reboot
Upload files through computing cloud without persistent File System, like Heroku ("resumable" uploads are not supported on Heroku and alike)
Use GridFS, AWS S3, Google Storage or DropBox and other (3rd-party storage)
APIs for checking file mime-type, size, extension, an other file's properties before upload using onBeforeUpload hook
APIs for resizing images, subversions management, and other post-processing tasks using onAfterUpload hook

Installation:

Install ostrio:files from Atmosphere

meteor add ostrio:files

ES6 Import:

Import in isomorphic location (e.g. on server and client)

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

API overview

For detailed docs, examples, and API — read documentation section.

FilesCollection Constructor [Isomorphic] - Initialize FilesCollection
insert() [Client] - Upload file(s) from client to server
find() [Isomorphic] - Create cursor for FilesCollection
remove() [Isomorphic] - Remove files from FilesCollection and "unlink" (e.g. remove) from FS
findOne() [Isomorphic] - Find one file in FilesCollection
write() [Server] - Write Buffer to FS and FilesCollection
load() [Server] - Write file to FS and FilesCollection from remote URL
addFile() [Server] - Add local file to FilesCollection from FS
unlink() [Server] - "Unlink" (e.g. remove) file from FS
link() [Isomorphic] - Generate downloadable link

`new FilesCollection([config])` [Isomorphic]

Read full docs for FilesCollection Constructor

Shared code:

1import { Meteor } from 'meteor/meteor';
2import { FilesCollection } from 'meteor/ostrio:files';
3
4const imagesCollection = new FilesCollection({
5  collectionName: 'images',
6  allowClientCode: false, // Disallow remove files from Client
7  onBeforeUpload(file) {
8    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
9    if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.extension)) {
10      return true;
11    }
12    return 'Please upload image, with size equal or less than 10MB';
13  }
14});
15
16if (Meteor.isClient) {
17  Meteor.subscribe('files.images.all');
18}
19
20if (Meteor.isServer) {
21  Meteor.publish('files.images.all', function () {
22    return imagesCollection.find().cursor;
23  });
24}

`insert(settings[, autoStart])` [Client]

Read full docs for insert() method

Upload form (template):

1<template name="uploadForm">
2  {{#with currentUpload}}
3    Uploading <b>{{file.name}}</b>:
4    <span id="progress">{{progress.get}}%</span>
5  {{else}}
6    <input id="fileInput" type="file" />
7  {{/with}}
8</template>

Shared code:

1import { FilesCollection } from 'meteor/ostrio:files';
2const imagesCollection = new FilesCollection({collectionName: 'images'});
3export default imagesCollection; // import in other files

Client's code:

1import { Template } from 'meteor/templating';
2import { ReactiveVar } from 'meteor/reactive-var';
3Template.uploadForm.onCreated(function () {
4  this.currentUpload = new ReactiveVar(false);
5});
6
7Template.uploadForm.helpers({
8  currentUpload() {
9    return Template.instance().currentUpload.get();
10  }
11});
12
13Template.uploadForm.events({
14  'change #fileInput'(e, template) {
15    if (e.currentTarget.files && e.currentTarget.files[0]) {
16      // We upload only one file, in case
17      // multiple files were selected
18      const upload = imagesCollection.insert({
19        file: e.currentTarget.files[0],
20        chunkSize: 'dynamic'
21      }, false);
22
23      upload.on('start', function () {
24        template.currentUpload.set(this);
25      });
26
27      upload.on('end', function (error, fileObj) {
28        if (error) {
29          alert(`Error during upload: ${error}`);
30        } else {
31          alert(`File "${fileObj.name}" successfully uploaded`);
32        }
33        template.currentUpload.set(false);
34      });
35
36      upload.start();
37    }
38  }
39});

For multiple file upload see this demo code.

Upload base64 string (introduced in v1.7.1):

1// As dataURI
2imagesCollection.insert({
3  file: 'data:image/png,base64str…',
4  isBase64: true, // <— Mandatory
5  fileName: 'pic.png' // <— Mandatory
6});
7
8// As plain base64:
9imagesCollection.insert({
10  file: 'base64str…',
11  isBase64: true, // <— Mandatory
12  fileName: 'pic.png', // <— Mandatory
13  type: 'image/png' // <— Mandatory
14});

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:

1<template name='file'>
2  <img src="{{imageFile.link}}" alt="{{imageFile.name}}" />
3  <!-- Same as: -->
4  <!-- <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}" /> -->
5  <hr>
6  <video height="auto" controls="controls">
7    <source src="{{videoFile.link}}?play=true" type="{{videoFile.type}}" />
8    <!-- Same as: -->
9    <!-- <source src="{{fileURL videoFile}}?play=true" type="{{videoFile.type}}" /> -->
10  </video>
11</template>

Shared code:

1import { Meteor } from 'meteor/meteor';
2import { FilesCollection } from 'meteor/ostrio:files';
3
4const imagesCollection = new FilesCollection({collectionName: 'images'});
5const videosCollection = new FilesCollection({collectionName: 'videos'});
6
7if (Meteor.isServer) {
8  // Upload sample files on server's startup:
9  Meteor.startup(() => {
10    imagesCollection.load('https://raw.githubusercontent.com/veliovgroup/Meteor-Files/master/logo.png', {
11      fileName: 'logo.png'
12    });
13    videosCollection.load('http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_5mb.mp4', {
14      fileName: 'Big-Buck-Bunny.mp4'
15    });
16  });
17
18  Meteor.publish('files.images.all', function () {
19    return imagesCollection.find().cursor;
20  });
21
22  Meteor.publish('files.videos.all', function () {
23    return videosCollection.find().cursor;
24  });
25} else {
26  // Subscribe to file's collections on Client
27  Meteor.subscribe('files.images.all');
28  Meteor.subscribe('files.videos.all');
29}

Client's code:

1Template.file.helpers({
2  imageFile() {
3    return imagesCollection.findOne();
4  },
5  videoFile() {
6    return videosCollection.findOne();
7  }
8});

For more expressive example see Streaming demo app

Download button

Template:

1<template name='file'>
2  <a href="{{file.link}}?download=true" download="{{file.name}}" target="_parent">
3    {{file.name}}
4  </a>
5</template>

Shared code:

1import { Meteor } from 'meteor/meteor';
2import { FilesCollection } from 'meteor/ostrio:files';
3const imagesCollection = new FilesCollection({collectionName: 'images'});
4
5if (Meteor.isServer) {
6  // Load sample image into FilesCollection on server's startup:
7  Meteor.startup(function () {
8    imagesCollection.load('https://raw.githubusercontent.com/veliovgroup/Meteor-Files/master/logo.png', {
9      fileName: 'logo.png',
10      meta: {}
11    });
12  });
13
14  Meteor.publish('files.images.all', function () {
15    return imagesCollection.find().cursor;
16  });
17} else {
18  // Subscribe on the client
19  Meteor.subscribe('files.images.all');
20}

Client's code:

1Template.file.helpers({
2  fileRef() {
3    return imagesCollection.findOne();
4  }
5});

For more expressive example see Download demo

FAQ:

Where are files 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:
- a. 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.
- b. On production: yourProdAppDir/programs/server. Note: If using MeteorUp (MUP), Docker volumes must to be added to mup.json, see MUP usage
Cordova usage and development: With support of community we do regular testing on virtual and real devices. To make sure Meteor-Files library runs smoothly in Cordova environment — enable withCredentials; enable {allowQueryStringCookies: true} and {allowedOrigins: true} on both Client and Server. For more details read Cookie's repository FAQ
How to pause/continue upload and get progress/speed/remaining time?: see Object returned from insert method
When using any of accounts packages - package accounts-base must be explicitly added to .meteor/packages above ostrio:files
cURL/POST uploads - Take a look on POST-Example by @noris666
In Safari (Mobile and Desktop) for DDP chunk size is reduced by algorithm, due to error thrown if frame is too big. Limit simultaneous uploads to 6 is recommended for Safari. This issue should be fixed in Safari 11. Switching to http transport (which has no such issue) is recommended for Safari. See #458
Make sure you're using single domain for the Meteor app, and the same domain for hosting Meteor-Files endpoints, see #737 for details
When proxying requests to Meteor-Files endpoint make sure protocol http/1.1 is used, see #742 for details

Awards:

Get Support:

Demo application:

Fully-featured file-sharing app

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

Support Meteor-Files project:

Star on GitHub
Star on Atmosphere
Share via Facebook and Twitter
Sponsor via GitHub
Support via PayPal — support my open source contributions once or on regular basis
Use ostr.io — Monitoring, Analytics, WebSec, Web-CRON and Pre-rendering for a website

Contribution:

Want to help? Please check issues for open and tagged as help wanted issues;
Want to contribute? Read and follow PR rules. All PRs are welcome on dev branch. Please, always give expressive description to your changes and additions.

Supporters:

We would like to thank everyone who support this project

@vanshady
@Neophen
@rikyperdana
@derwok, check out his project - 4minitz
@FinnFrotscher
@Neobii
@themeteorchef
@MeDBejoHok
@martunta

ostrio:files

Files for Meteor.js

ToC:

Key features

Installation:

ES6 Import:

API overview

new FilesCollection([config]) [Isomorphic]

insert(settings[, autoStart]) [Client]

Stream files

Download button

FAQ:

Awards:

Get Support:

Demo application:

Related Packages:

Support Meteor-Files project:

Contribution:

Supporters:

`new FilesCollection([config])` [Isomorphic]

`insert(settings[, autoStart])` [Client]