Upload files via DDP, HTTP and WebRTC/DC. To Meteor server FS, AWS, GridFS, DropBox or Google Drive. Fast, secure and robust.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github nl Apr 17, 2018
.npm/package v1.10.2 Aug 16, 2018
demo-simplest-download-button Move demo apps Oct 12, 2016
demo-simplest-streaming Move demo apps Oct 12, 2016
demo-simplest-upload Move demo apps Oct 12, 2016
demo Move demo apps Oct 12, 2016
docs Implement: #626 , thanks to @schlaegerz and @aureooms Jul 23, 2018
tests Cover new helpers (underscore replacement) with tests Jul 22, 2018
.eslintrc Rules to not allow issue like in #605 , thanks to @bcomnes Apr 21, 2018
.gitignore Add extra-tests, but not publish them, yet Jun 2, 2016
.npmignore npmignore file May 20, 2016
.versions v1.10.2 Aug 16, 2018
CHANGELOG.md v1.5.0 Apr 27, 2016
CODE_OF_CONDUCT.md meta update Nov 10, 2017
CONTRIBUTING.md nl Apr 17, 2018
HISTORY.md v1.5.0 Apr 27, 2016
LICENSE Year bump Jan 27, 2018
README.md @vanshady Thank you for supporting our project! Apr 20, 2018
client.js πŸ‘·β€β™‚οΈ Minor codebase enhancements Aug 16, 2018
core.js πŸ‘·β€β™‚οΈ Minor codebase enhancements Aug 16, 2018
cursor.js Implement: #626 , thanks to @schlaegerz and @aureooms Jul 23, 2018
lib.js Implement: #626 , thanks to @schlaegerz and @aureooms Jul 23, 2018
logo-bw.png New logos! Jun 20, 2016
logo.png New logos! Jun 20, 2016
package.js v1.10.2 Aug 16, 2018
server.js πŸ‘·β€β™‚οΈ Minor codebase enhancements Aug 16, 2018
upload.js πŸ‘·β€β™‚οΈ Minor codebase enhancements Aug 16, 2018
worker.js ? linting Dec 9, 2017
worker.min.js Hot minor fix Jan 19, 2017
write-stream.js Get rid of underscore package dependency Jul 22, 2018

README.md

Donate Mentioned in Awesome ostrio:files Gitter GitHub issues GitHub forks GitHub stars Twitter

ToC:

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:

Support Meteor-Files project:

Contribution:

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

Awards:

Demo application:

Related Packages:

Why Meteor-Files?

Easy-peasy kids, yeah?

Installation:

meteor add ostrio:files

ES6 Import:

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

FAQ:

  1. 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:
    • 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. Note: If using MeteorUp (MUP), Docker volumes must to be added to mup.json, see MUP usage
  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
  4. cURL/POST uploads - Take a look on POST-Example by @noris666
  5. In Safari (Mobile and Desktop) for DDP upload streams is hardcoded to 1 and chunk size is reduced by algorithm, due to error hrown if too many connection is open by the browser or 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

API overview (full API)

new FilesCollection([config]) [Isomorphic]

Read full docs for FilesCollection Constructor

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

import { FilesCollection } from 'meteor/ostrio:files';
const Images = new FilesCollection({collectionName: 'Images'});
export default Images; // To be imported 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],
        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();
    }
  }
});

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, // <β€” 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

Stream files

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:

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:

<template name='file'>
  <a href="{{file.link}}?download=true" download="{{file.name}}" target="_parent">
    {{file.name}}
  </a>
</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

Supporters:

We 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
logo 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
Donate