Code Monkey home page Code Monkey logo

meteor-files's Introduction

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?

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

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.