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()

.remove()

.unlink()

.write()

ToC:

• Wiki - Full documentation
• Installation
  • ES6 Import
• API:
  • Initialize Collection
  • Upload file
  • Stream files
  • Download Button
• Documentation and tutorials
  • Demo apps and examples
  • 3rd-party storage integration examples - AWS S3, DropBox, GridFS and Google Storage
  • TypeScript Definitions
• Related Packages
• Why this package?
• Help / Support
• FAQ
• Awards
• Help & Contribute
• Support this project
• Supporters

Why

Meteor-Files

?

• Compatible with all front-end frameworks from Blaze to React
• Upload via

  HTTP

  and

  DDP

  transports, read about difference
• Sustainable and resumable uploads, which will survive connection interruption and server reboot (if a server has persistent storage)
• Upload files through computing cloud without persistent File System, like Heroku
• You need store files at GridFS, AWS S3, Google Storage or DropBox? (Use 3rd-party storage)
• You need to check file mime-type, size or extension? Easy! Use

  onBeforeUpload

  hook
• You need to resize images after upload? Easy too! Use

  onAfterUpload

  hook, and manage file's subversions in a single record

Installation:

meteor add ostrio:files

ES6 Import:

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

API overview (full API)

new FilesCollection([config])

[Isomorphic]

Read full docs for

FilesCollection

Shared code:

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

const Images = new FilesCollection({
  collectionName: 'Images',
  allowClientCode: false, // Disallow remove files from Client
  onBeforeUpload(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;
    }
    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;
  });
}

insert(settings[, autoStart])

[Client]

Read full docs for

insert()

Upload form (template):

Shared code:

import { FilesCollection } from 'meteor/ostrio:files';
const Images = new FilesCollection({collectionName: 'Images'});
export default Images; // import in other files

Client's code:

import { Template }    from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
Template.uploadForm.onCreated(function () {
  this.currentUpload = new ReactiveVar(false);
});

Template.uploadForm.helpers({
  currentUpload() {
    return Template.instance().currentUpload.get();
  }
});
Template.uploadForm.events({
  'change #fileInput'(e, template) {
    if (e.currentTarget.files && e.currentTarget.files[0]) {
      // We upload only one file, in case
      // multiple files were selected
      const upload = Images.insert({
        file: e.currentTarget.files[0],
        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();
}
  }
});

For multiple file upload see this demo code.

Upload base64 string (introduced in v1.7.1):

// As dataURI
Images.insert({
  file: 'data:image/png,base64str…',
  isBase64: true, // 
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:

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

const Images = new FilesCollection({collectionName: 'Images'});
const Videos = new FilesCollection({collectionName: 'Videos'});
if (Meteor.isServer) {
  // Upload sample files on server's startup:
  Meteor.startup(() => {
    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 {
  // Subscribe to file's collections on Client
  Meteor.subscribe('files.images.all');
  Meteor.subscribe('files.videos.all');
}

Client's code:
Template.file.helpers({
  imageFile() {
    return Images.findOne();
  },
  videoFile() {
    return Videos.findOne();
  }
});

For more expressive example see Streaming demo app

Download button

Template:

Shared code:
import { Meteor } from 'meteor/meteor';
import { FilesCollection } from 'meteor/ostrio:files';
const Images = new FilesCollection({collectionName: 'Images'});

if (Meteor.isServer) {
  // Load sample image into FilesCollection on server's startup:
  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 {
  // Subscribe on the client
  Meteor.subscribe('files.images.all');
}

Client's code:
Template.file.helpers({
  fileRef() {
    return Images.findOne();
  }
});

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:

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

Demo application:

• Live: files.veliov.com
• Source Code Rep

Related Packages:

• 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. Because of those guys this project can have 100% of our attention.

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