File sharing web app

September 24, 2025 · View on GitHub

support support ostr.io web services meteor-files.com: upload files like never before

File sharing web app

This is repository with codebase of the web application available at files.veliov.com. It's fully-featured file-sharing service build on top of ostrio:files library and meteor.js.

This is third reincarnation of this webapp, most of changes in this release made during Impact Meteor Conference 2020 to showcase Meteor usage building modern webapps.

Awarded by Meteor Chef with GCAA 2016. Used by thousands Meteor developers to manage files and uploads in Meteor.js apps.

Backed by veliovgroup, sponsored by ostr.io, meteor-files.com, and awesome community members. Idea, design, development, maintenance, and support by @smart_egg and @veliovgroup.

ToC:

Goals

Goals of this open source web application:

  • Showcase usage of ostrio:files library
  • Showcase usage of ServiceWorker with Meteor
  • Showcase implementing fully-featured PWA (including push-notifications) using Meteor
  • Build good and open source solution to quickly upload and share files

Functionality:

  • 📑 Upload / Download Files
  • 🗂 Drag'n'drop support for files and directories (including nested directories)
  • 🗄 Use AWS:S3 as a storage
  • 📲 Install-able PWA with Push Notifications
  • 🚀 Upload via HTTP and/or DDP
  • 👨‍💻 User authentication and permissions settings per user

Quick start:

Application is ready to be used as it is without need of extra configuration. Optionally there's a lot of room for changing settings to meet required features, like store files in AWS:S3, send Web Push Notifications via APNs when file is fully loaded and moved to long-term storage.

Activate AWS:S3

  1. Read this article
  2. After creating S3 bucket, create CloudFront Distribution and attach it to S3 bucket
  3. Set S3 credentials into METEOR_SETTINGS env.var or pass as the file, read here for more info, alternatively (if something not working) set S3 env.var
  4. You can pass S3 credentials as JSON-string when using "Heroku's one click install-button"

S3 credentials format (region is required):

{
  "app": {
    "s3": {
      "key": "xxx",
      "secret": "xxx",
      "bucket": "xxx",
      "region": "xxx"
    }
  }
}

User Accounts

Activate login via Social Networks. All credentials is set via settings.json or METEOR_SETTINGS env.variable.

Get OAuth keys and credentials at

Setup settings.json

Update setting.json with serviceConfiguration (loginStyle can be redirect or popup):

"serviceConfiguration": {
  "github": {
    "clientId": "aaaaaaaaaaaaaaaaaaaa",
    "secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "loginStyle": "redirect"
  },
  "facebook": {
    "appId": "aaaaaaaaaaaaaaa",
    "secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "loginStyle": "redirect"
  },
  "twitter": {
    "consumerKey": "aaaaaaaaaaaaaaaaaaaaaaaaa",
    "secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "loginStyle": "redirect"
  },
  "meteor-developer": {
    "secret": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
    "clientId": "xxxxxxxxxxxxxxxxx",
    "loginStyle": "redirect"
  }
}

Tip

When configuring OAuth login with a provider (such as Facebook or Google), Meteor lets you choose a popup- or redirect-based flow. In a popup-based flow, when a user logs in, they will be prompted to login at the provider in a popup window. In a redirect-based flow, the user's whole browser window will be redirected to the login provider, and the window will redirect back to your app when the login is completed. Learn more in Meteor.js documentation

Activate Web Push Notifications

  1. Install web-push NPM package
  2. Generate key-pair using webpush.generateVAPIDKeys();
  3. Set VAPID credentials into METEOR_SETTINGS env.var or pass as the file, read here for more info

VAPID credentials format:

{
  "public": {
    "vapid": {
      "publicKey": ""
    }
  },
  "app": {
    "vapid": {
      "email": "mailto:webmaster@example.com", // SET TO REAL EMAIL
      "privateKey": ""
    }
  }
}

Application settings

All supported and annotated settings

{
  "debug": false, // Enable debug mode on a Server
  "app": { // application server-settings
    "storagePath": "/data/meteor-files/uploads", // LOCAL STORAGE ON THE SERVER
    "continueUploadTTL": 10800, // RESUMALBE UPLOADS TTL
    "spiderable": { // `spiderable-middleware` package settings
      "auth": ""
    },
    "s3": { // AWS:S3 CLOUD STORAGE CREDENTIALS
      "key": "",
      "secret": "",
      "bucket": "",
      "region": ""
    },
    "vapid": { // VAPID WEB PUSH NOTIFICATIONS CONFIGURATION
      "email": "mailto:webmaster@example.com", // WEB PUSH NOTIFICATION EMAIL
      "privateKey": "" // WEB PUSH NOTIFICATION PRIVATE KEY
    }
  },
  "serviceConfiguration": {}, // SEE "User Accounts" SECTION ABOVE
  "public": {
    "debug": false, // Enable debug mode on a Client (Browser)
    "maxFileSizeMb": 1024, // MAXIMUM UPLOAD FILE-SIZE IN MEGABYTES (1024mb ~= 1GB)
    "maxFilesQty": 8, // MAXIMUM AMOUNT OF SIMULTANEOUSLY UPLOADED FILES
    "fileTTLSec": 259200, // 3 days; FILE'S TTL IN SECONDS
    "vapid": { // VAPID WEB PUSH NOTIFICATIONS CONFIGURATION
      "publicKey": "" // WEB PUSH NOTIFICATION PUBLIC KEY
    },
    "trackingId": "" // trackingId for ostrio-analytics package
  }
}

Deployment

Learn more about DevOps, deployment, and running this app live in DevOps and Deployment tutorial.

SEO

To make this project "crawlable" by search engines, social networks, and web-crawlers on this project we are using:

Meta tags and title

Using ostrio:flow-router-meta package controlling meta-tags content as easy as extending FlowRouter definition with { meta, title, link } properties:

FlowRouter.route('/about', {
  name: 'about',
  title: 'About',
  meta: {
    description: 'About file-sharing web application'
  },
  action() {
    this.render('layout', 'about');
  }
});

Set default meta tags and page title using FlowRouter.globals.push({ meta }):

const title = 'Default page title up to 65 symbols';
const description = 'Default description up to 160 symbols';

FlowRouter.globals.push({ title });
FlowRouter.globals.push({
  meta: {
    description,
    robots: 'index, follow',
    keywords: 'keywords, separated, with, comma'
  }
});

Activate meta and title packages:

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterMeta, FlowRouterTitle } from 'meteor/ostrio:flow-router-meta';

/* ... DEFINE FLOWROUTER RULES HERE, BEFORE INIT ... */

new FlowRouterTitle(FlowRouter);
new FlowRouterMeta(FlowRouter);

Pre-rendering

To pre-render JS-driven templates (Blaze, React, Vue, etc.) to HTML we are using pre-rendering via siderable-middleware package:

/*
 * @locus Server
 */

import { Meteor } from 'meteor/meteor';
import { WebApp } from 'meteor/webapp';
import Spiderable from 'meteor/ostrio:spiderable-middleware';

WebApp.connectHandlers.use(new Spiderable({
  serviceURL: 'https://render.ostr.io',
  auth: 'pass:login',
  only: [/^\/?$/, /^\/about\/?$/i, /^\/f\/[A-z0-9]{16}\/?$/i]
}));

// Allow pre-rendering only for existing public routes: `/index`, `/about`, and `/f/file_id`

Pre-rendering getting activated by setting spiderable.auth property in METEOR_SETTINGS environment variable or settings.json on a dev stage.

Debugging

Having an issue running this web application? Try next options to find out why:

On a server

Set environment variable DEBUG to true or { debug: true } in the settings file passed via --settings option. This will enable logging mode in the meteor-files package

On a client (browser)

Set { public: { debug: true } } in the settings file passed via --settings option. This will enable logging mode in the meteor-files package and other components of the web application

Support our open source contributions