leefurong / meteor-files

File Upload for Meteor

Files for Meteor

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

For current upload pause/continue, speed, remaining time and progress see Object returned from insert method.

Support:

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

Support Meteor-Files project:

• Donate via PayPal
• Star on GitHub
• Stat on Atmosphere
• Share on Facebook and Twitter

Awards:

Demo application:

• Live
• Source
• Compiled Demo App
• 

ToC:

• Wiki - Full documentation
• Why this package?
• Install
• API:
  • Initialize Collection
  • Upload file
  • Stream files
  • Download Button

Why Meteor-Files?

The cfs is a well known package, but it's huge monster which combines everything. In Meteor-Files is nothing to broke, it's simply upload/store/serve files to/from server.

• Support for both HTTP and DDP transports for upload
• You need store to GridFS, AWS S3 or DropBox? (Use 3rd-party storage) - Add it yourself
• You need to check file mime-type, size or extension? (onBeforeUpload) - Add it yourself
• You need to resize images after upload? (onAfterUpload, file's subversions) - Add it yourself

Easy-peasy kids, yeah?

Install:

meteor add ostrio:files

API overview (full API)

Note: When using any of accounts packages - package accounts-base must be explicitly added to .meteor/packages above ostrio:files

new FilesCollection([config]) [Isomorphic]

Read full docs for FilesCollection Constructor

Shared code:

var Images = new FilesCollection({
  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.extension)) {
      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.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:

this.Images = new FilesCollection({collectionName: 'Images'});

Client's code:

Template.uploadForm.onCreated(function () {
  this.currentUpload = new ReactiveVar(false);
});

Template.uploadForm.helpers({
  currentUpload: function () {
    return Template.instance().currentUpload.get();
  }
});

Template.uploadForm.events({
  'change #fileInput': function (e, template) {
    if (e.currentTarget.files && e.currentTarget.files[0]) {
      // We upload only one file, in case 
      // multiple files were selected
      var 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 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:

this.Images = new FilesCollection({collectionName: 'Images'});
this.Videos = new FilesCollection({collectionName: 'Videos'});

// Upload sample files on server's 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.find().cursor;
  });
  Meteor.publish('files.videos.all', function () {
    return Videos.find().cursor;
  });

} else {
  Meteor.subscribe('files.images.all');
  Meteor.subscribe('files.videos.all');
}

Client's code:

Template.file.helpers({
  imageFile: function () {
    return Images.findOne();
  },
  videoFile: function () {
    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:

this.Images = new FilesCollection({collectionName: 'Images'});

// Load sample image into FilesCollection on server's 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.find().cursor;
  });
} else {
  Meteor.subscribe('files.images.all');
}

Client's code:

Template.file.helpers({
  fileRef: function () {
    return Images.findOne();
  }
});

For more expressive example see Download demo

Supporters:

I would like to thank everyone who support this project. Because of those guys this project can have 100% of our attention.

• @themeteorchef
• @MeDBejoHok

---

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 about it or share at Facebook