Skip to content

CitizenLabDotCo/meteor-autoform-file

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Autoform File

Description

Upload and manage files with autoForm.

Meteor autoform file

Quick Start

  1. Install meteor add yogiben:autoform-file

  2. Create your collectionFS (See collectionFS)

@Images = new FS.Collection("images",
  stores: [new FS.Store.GridFS("images", {})]
)
  1. Make sure the correct allow rules & subscriptions are set up on the collectionFS
Images.allow
  insert: (userId, doc) ->
    true
  download: (userId)->
    true

and

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

and in your router.coffee

  @route "profile",
    waitOn: ->
      [
        Meteor.subscribe 'images'
      ]
  1. Define your schema and set the autoform property like in the example below
Schemas = {}

@Posts = new Meteor.Collection('posts');

Schemas.Posts = new SimpleSchema
  title:
    type: String
    max: 60

  picture:
    type: String
    autoform:
      afFieldInput:
        type: 'fileUpload'
        collection: 'Images'
        label: 'Choose file' # optional

Posts.attachSchema(Schemas.Posts)

The collection property is the field name of your collectionFS.

  1. 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

Schemas.Posts = new SimpleSchema
  title:
    type: String
    max: 60

  pictures:
    type: [String]
    label: 'Choose file' # optional

  "pictures.$":
    autoform:
      afFieldInput:
        type: 'fileUpload',
        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:

picture:
  type: String
  autoform:
    afFieldInput:
      type: 'fileUpload'
      collection: 'Images'
      accept: 'image/*'
      label: 'Choose file' # optional

About

Upload and manage files with #autoForm

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CoffeeScript 54.5%
  • HTML 22.7%
  • JavaScript 16.4%
  • CSS 6.4%