Meteor Upload File with jQuery File Upload

[EDIT 18/2/2014] Full Cordova support straight out of the box! Follow the guidelines at the project Github page

[EDIT 20/12/2014]: Due to big amount of requests I have added the drag and drop support for file uploads. Currently upload of drag and dropped files cannot be canceled

[EDIT 10/11/2014]: For the most updated documentation to this upload control please go to the project Github page.

In this post I’ll introduce two new packages using which you can easily setup a file upload service to your Meteor server. This solution has following perks:

1. Uses the famous jQuery file upload system from blueimp.
   1. As a result you can upload any file size (default limit 11GB)
   2. Displays upload progress
   3. Uploads can be canceled
   4. You can upload multiple files
   5. Images can be resized to various sizes using the imagemagick
2. Saves and serves file from arbitrary folder on your server. This solves problems with hot-code reload, when files are saved into Meteor’s public directory
   1. Possibility to save files to subfolders
   2. Possibility to rename files on the server
3. Simple configuration and installation! No need to install 10+ packages like with Collection-FS solution

Here is a screenshot of the interface:

Please note that since we are using blueimp’s juery solution, this solution has a full potential of performing client image resizes, chunked uploads, upload resume and more. These features will be gradually added. Pull requests are welcome!

Demo application can be found on Github

Quick Start

Install packages

$ meteor add tomi:upload-server
$ meteor add tomi:upload-jquery

Create directory in the application root

mkdir -p .uploads/tmp

Configure server

//file:/server/init.js
Meteor.startup(function () {
  UploadServer.init({
    tmpDir: process.env.PWD + '/.uploads/tmp',
    uploadDir: process.env.PWD + '/.uploads/'
  })
});

Use template

<template name="yourTemplate">
    {{> upload_bootstrap }}
</template>

DONE!

Installation

The installation is very simple and consists of installing two packages:

$ meteor add tomi:upload-server
$ meteor add tomi:upload-jquery

I have separated these two packages, because often you will want to run your upload service as a separate application. There are several options supported by blueimp, such as Java, ASP, Ruby and more or even node.js Express server installed via NPM. If you wish to use self standing server, install only the tomi:upload-jquery package.

Configuration

Server

First, we need to initialise the server and configure upload paths (see below for explanation of the different options):

//file:/server/init.js
Meteor.startup(function () {
  UploadServer.init({
    tmpDir: '/Users/tomi/Documents/Uploads/tmp',
    uploadDir: '/Users/tomi/Documents/Uploads/',
    getDirectory: function(file, formData) {
      return formData.contentType;
    },
    finished: function(file, folder, formFields) {
      console.log('Write to database: ' + folder + '/' + file);
    }
  })
});

Following options are available for UploadServer.init(options):

Field	Type	Default	Description
tmpDir	String	null	Temporary upload directory
uploadDir	String	null	Path to the upload directory
uploadUrl	String	‘/upload/’	Upload route
maxPostSize	int	11000000000	Maximum post size (11 GB)
minFileSize	int	1	Minimum file size
maxFileSize	int	10000000000	Maximum file size (10 GB)
acceptFileTypes	RegEx	/.+/i,	Accepted types of files (e.g. prohibit .exe)
imageTypes	RegEx		Images which can be resized with Imagemagick (e.g. /\.(gif\|jpe?g\|png)$/i)
imageVersions	Object	{}	Defines the sizes of images which will be converted and saved to upload directory. For example {thumbnailBig: {width: 400, height: 300}, thumbnailSmall: {width: 200, height: 100}}
getDirectory	function		functions which decides the subdirectory in which the file will be saved. In this function is not defined, no sub-directory is created. For example: function(file, formData) { return '/my/sub/directory'; }
getFileName	function		Renames the file on the server. In no function is specified, file is saved with the original file name. For example: `function(file, formData) { return ‘Saved-‘ + file; }
finished	function		Callback

Client

On client we have a possibility to use pre-defined templates, existing for semantic-ui and bootstrap. We can use several upload forms on the page. We can distinguish what kind of content we are uploading, by providing the contentType parameter. We can also limit the file type available for the file picker using parameter fileTypes. Following is an example of how you can include the upload form on your page:

<template name="home">
    <h3>PDFs</h3>
    {{> upload_semantic_ui contentType='pdfs' fileTypes='.pdf' }}
    <h3>Images</h3>
    {{> upload_bootstrap contentType='images' fileTypes='.jpg' multiple=true }}
</template>

If you wish to create your own template for uploading, you can use following call in the rendered callback to set up uploading functionality:

Template['your_upload_template'].rendered = function () {
  Uploader.render.call(this);
};

When using this approach, your template MUST contain following:

• element with class .uploadFilePicker holding the file picker
• element with class .uploadProgressHolder holding the file picker
• element with class .uploadProgressBar showing the progress bar
• element with class .uploadProgressLabel showing the progress label

If you wish to use custom URL for your uploads this can be configured as following:

Uploader.uploadUrl = 'http://yoururl';