Need help with Meteor-Files?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

veliovgroup
1.0K Stars 149 Forks BSD 3-Clause "New" or "Revised" License 1.1K Commits 10 Opened issues

Description

🚀 Upload files via DDP or HTTP to ☄️ Meteor server FS, AWS, GridFS, DropBox or Google Drive. Fast, secure and robust.

Services available

!
?

Need anything else?

Contributors list

# 18,138
JavaScr...
meteor
PHP
Laravel
692 commits
# 266,745
HTML
aws-s3
meteor
gridfs
13 commits
# 97,016
Swift
Kotlin
aws-s3
meteor
13 commits
# 301,864
JavaScr...
aws-s3
meteor
gridfs
9 commits
# 89,065
verilog
aws-s3
meteor
dropbox
8 commits
# 28,857
meteor
blaze
MongoDB
npm
8 commits
# 324,670
JavaScr...
aws-s3
meteor
gridfs
7 commits
# 324,050
JavaScr...
aws-s3
meteor
gridfs
6 commits
# 347,916
JavaScr...
aws-s3
meteor
gridfs
5 commits
# 341,857
aws-s3
meteor
gridfs
dropbox
5 commits
# 355,797
JavaScr...
aws-s3
meteor
gridfs
5 commits
# 376,672
JavaScr...
aws-s3
meteor
gridfs
4 commits
# 80,551
gui-fra...
gridfs
dropbox
Univers...
4 commits
# 211,506
meteor
aws-s3
gridfs
dropbox
4 commits
# 269,658
meteor
aws-s3
gridfs
dropbox
3 commits
# 398,368
aws-s3
meteor
gridfs
dropbox
3 commits
# 353,611
JavaScr...
ical
Ruby
aws-s3
3 commits
# 402,720
JavaScr...
aws-s3
meteor
gridfs
3 commits
# 15,543
aws-s3
dropbox
CSS
luis
3 commits
# 298,446
aws-s3
meteor
gridfs
dropbox
3 commits

support support Mentioned in Awesome ostrio:files Gitter GitHub stars

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.

ToC:

Why
Meteor-Files
?

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


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:

  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:
    • 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
  2. 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
  3. How to pause/continue upload and get progress/speed/remaining time?: see Object returned from
    insert
    method
  4. When using any of
    accounts
    packages - package
    accounts-base
    must be explicitly added to
    .meteor/packages
    above
    ostrio:files
  5. cURL/POST uploads - Take a look on POST-Example by @noris666
  6. 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
  7. Make sure you're using single domain for the Meteor app, and the same domain for hosting Meteor-Files endpoints, see #737 for details
  8. When proxying requests to Meteor-Files endpoint make sure protocol
    http/1.1
    is used, see #742 for details

Awards:

Get Support:

Demo application:

Related Packages:

Support Meteor-Files project:

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.