Autoform File

Description

Upload and manage files with autoForm.

Quick Start

1. Install meteor add yogiben:autoform-file

2. Create your collectionFS (See collectionFS)

1@Images = new FS.Collection("images",
2  stores: [new FS.Store.GridFS("images", {})]
3)

3. Make sure the correct allow rules & subscriptions are set up on the collectionFS

1Images.allow
2  insert: (userId, doc) ->
3    true
4  download: (userId)->
5    true

and

1Meteor.publish 'images', ->
2  Images.find()

and in your router.coffee

1  @route "profile",
2    waitOn: ->
3      [
4        Meteor.subscribe 'images'
5      ]

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

1Schemas = {}
2
3@Posts = new Meteor.Collection('posts');
4
5Schemas.Posts = new SimpleSchema
6  title:
7    type: String
8    max: 60
9
10  picture:
11    type: String
12    autoform:
13      afFieldInput:
14        type: 'fileUpload'
15        collection: 'Images'
16        label: 'Choose file' # optional
17
18Posts.attachSchema(Schemas.Posts)

The collection property is the field name of your collectionFS.

5. Generate the form with {{> quickform}} or {{#autoform}}

e.g.

{{> quickForm collection="Posts" type="insert"}}

or

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

###Multiple images### 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: [String]
8    label: 'Choose file' # optional
9
10  "pictures.$":
11    autoform:
12      afFieldInput:
13        type: 'fileUpload',
14        collection: 'Images'

###Security & optimization### The above example is just a starting point. You should set your own custom allow rules and optimize your subscriptions.

Customization

You can customize the button / remove text.

Defaults:

{{> afFieldInput name="picture" label="Choose file" remove-label="Remove"}}

Also it is possible to customize accept attribute

add it in your schema definition:

1picture:
2  type: String
3  autoform:
4    afFieldInput:
5      type: 'fileUpload'
6      collection: 'Images'
7      accept: 'image/*'
8      label: 'Choose file' # optional
9