Autoform File

# meteor@>=1.9
meteor add ostrio:autoform-files

# meteor@<1.9
meteor add ostrio:autoform-files@2.2.1

Description

Upload and manage files with autoForm via ostrio:files. This package was ported from yogiben:autoform-file to use with ostrio:files instead of the already deprecated CollectionFS.

Quick Start:

Install meteor add ostrio:autoform-files
Install meteor add ostrio:files, if not yet installed
Add this config to simpl-schema NPM package (depending of the language that you are using):

1SimpleSchema.setDefaultMessages({
2  initialLanguage: 'en',
3  messages: {
4    en: {
5      uploadError: '{{value}}', //File-upload
6    },
7  }
8});

Create your Files Collection (See ostrio:files)

1import { Meteor } from 'meteor/meteor';
2import { FilesCollection } from 'meteor/ostrio:files';
3
4const Images = new FilesCollection({
5  collectionName: 'Images',
6  allowClientCode: true, // Required to let you remove uploaded file
7  onBeforeUpload(file) {
8    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
9    if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.ext)) {
10      return true;
11    }
12    return 'Please upload image, with size equal or less than 10MB';
13  }
14});
15
16if (Meteor.isClient) {
17  Meteor.subscribe('files.images.all');
18}
19
20if (Meteor.isServer) {
21  Meteor.publish('files.images.all', () => {
22    return Images.collection.find({});
23  });
24}

Note: If you don't use Mongo Collection instances (dburles:mongo-collection-instances), then the Images variable must be attached to Global scope. And has same name (case-sensitive) as collectionName option passed into FilesCollection#insert({collectionName: 'Images'}) method, Images in our case.

To start using dburles:mongo-collection-instances simply install it:

meteor add dburles:mongo-collection-instances

Define your schema and set the autoform property like in the example below

1Schemas = {};
2Posts   = new Meteor.Collection('posts');
3Schemas.Posts = new SimpleSchema({
4  title: {
5    type: String,
6    max: 60
7  },
8  picture: {
9    type: String,
10    autoform: {
11      afFieldInput: {
12        type: 'fileUpload',
13        collection: 'Images',
14        uploadTemplate: 'uploadField', // <- Optional
15        previewTemplate: 'uploadPreview', // <- Optional
16        insertConfig: { // <- Optional, .insert() method options, see: https://github.com/VeliovGroup/Meteor-Files/wiki/Insert-(Upload)
17          meta: {},
18          isBase64: false,
19          transport: 'ddp',
20          streams: 'dynamic',
21          chunkSize: 'dynamic',
22          allowWebWorkers: true
23        }
24      }
25    }
26  }
27});
28
29Posts.attachSchema(Schemas.Posts);

The collection property must be the same as name of your FilesCollection (case-sensitive), Images in our case.

Generate the form with {{> quickform}} or {{#autoform}} e.g.:

Insert mode:

{{> quickForm id="postsInsertForm" collection="Posts" type="insert"}}
<!-- OR -->
{{#autoForm id="postsInsertForm" collection="Posts" type="insert"}}
  {{> afQuickField name="title"}}
  {{> afQuickField name="picture"}}
  <button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}

<!-- OR with .insert() method options -->
<!-- See: https://github.com/VeliovGroup/Meteor-Files/wiki/Insert-(Upload) -->
{{#autoForm id="postsInsertForm" collection="Posts" type="insert"}}
  {{> afQuickField name="title"}}
  {{> afQuickField name="picture" transport="http" allowWebWorkers="false"}}
  <button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}

Update mode:

{{#if Template.subscriptionsReady }}
  {{> quickForm id="postsUpdateForm" collection="Posts" type="update" doc=getPost}}
{{/if}}
<!-- OR -->
{{#if Template.subscriptionsReady }}
  {{#autoForm id="postsUpdateForm" collection="Posts" type="update" doc=getPost}}
    {{> afQuickField name="title"}}
    {{> afQuickField name="picture"}}
    <button type="submit" class="btn btn-primary">Update</button>
  {{/autoForm}}
{{/if}}

Autoform should be wrapped in {{#if Template.subscriptionsReady }} which makes sure that template level subscription is ready. Without it the picture preview won't be shown. You can see update mode example here.

Accept configuration

Usage

You can configure the file selector, to only allow certain types of files using the accept property:

1Schemas.Posts = new SimpleSchema({
2  title: {
3    type: String,
4    max: 60
5  },
6  picture: {
7    type: String,
8    autoform: {
9      afFieldInput: {
10        type: 'fileUpload',
11        collection: 'Images',
12        accept: 'image/*' // or use explicit ext names like .png,.jpg
13      }
14    }
15  }
16});

The accept values works makes use of the native HTML accept attribute. Read more at the MDN documentation.

Please read the section on custom upload templates and how to integrate configs like accept to your custom template.

Multiple images

Multiple images — not fully supported yet

If you want to use an array of images inside you have to define the autoform on on the schema key

1Schemas.Posts = new SimpleSchema({
2  title: {
3    type: String,
4    max: 60
5  },
6  pictures: {
7    type: Array,
8    label: 'Choose file' // <- Optional
9  },
10  'pictures.$': {
11    type: String,
12    autoform: {
13      afFieldInput: {
14        type: 'fileUpload',
15        collection: 'Images'
16      }
17    }
18  }
19});

Custom file preview

Your custom file preview template data context will be:

file - fileObj instance

1({
2  picture: {
3    type: String,
4    autoform: {
5      afFieldInput: {
6        type: 'fileUpload',
7        collection: 'Images',
8        previewTemplate: 'myFilePreview'
9      }
10    }
11  }
12});

<template name="myFileUpload">
  <a href="{{file.link}}">{{file.original.name}}</a>
</template>

Custom upload template

Your custom file upload template data context will be:

file - FS.File instance
progress
status
config an object containing several configs to upload behavior, such as accept
Other fields from FileUpload instance

1({
2  picture: {
3    type: String,
4    autoform: {
5      afFieldInput: {
6        type: 'fileUpload',
7        collection: 'Images',
8        uploadTemplate: 'myFileUpload'
9      }
10    }
11  }
12});

<template name="myFileUpload">
  {{#with progress}}
    <!-- if there is a progress present, we can use it to determine the upload progress -->
    <progress value="{{this.get}}" max="100"></progress>
  {{/with}}
  {{#with file}}
    <!-- if there is a file present, we have a file selected for upload -->
    <span>Uploading {{this.name}}</span>
  {{else}}
     <!-- otherwise we provide the upload -->
     <input data-files-collection-upload class="form-control af-file-upload-capture" type="file" accept="{{config.accept}}" />
  {{/if}}
</template>

Note on upload configs:

If you pass any config, like accept your upload data won't be falsey anymore, so you should update your template to the example above and check for each of the given properties. This is however backwards-compatible and will not break your older templates if you don't need any of the upload config introduced in > 2.1.4 releases.

Support this project:

Become a patron — support my open source contributions with monthly donation
Use ostr.io — Monitoring, Analytics, WebSec, Web-CRON and Pre-rendering for a website