Autoform File
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
)
1const Images = new FilesCollection({ 2 collectionName: 'Images', 3 allowClientCode: true, // Required to let you remove uploaded file 4 onBeforeUpload(file) { 5 // Allow upload files under 10MB, and only in png/jpg/jpeg formats 6 if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.ext)) { 7 return true; 8 } else { 9 return 'Please upload image, with size equal or less than 10MB'; 10 } 11 } 12}); 13 14if (Meteor.isClient) { 15 Meteor.subscribe('files.images.all'); 16} 17 18if (Meteor.isServer) { 19 Meteor.publish('files.images.all', () => { 20 return Images.collection.find({}); 21 }); 22}
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 } 17 } 18 } 19}); 20 21Posts.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:
1{{> quickForm id="postsInsertForm" collection="Posts" type="insert"}} 2<!-- OR --> 3{{#autoForm id="postsInsertForm" collection="Posts" type="insert"}} 4 {{> afQuickField name="title"}} 5 {{> afQuickField name="picture"}} 6 <button type="submit" class="btn btn-primary">Insert</button> 7{{/autoForm}}
Update mode:
1{{#if Template.subscriptionsReady }} 2 {{> quickForm id="postsUpdateForm" collection="Posts" type="update" doc=getPost}} 3{{/if}} 4<!-- OR --> 5{{#if Template.subscriptionsReady }} 6 {{#autoForm id="postsUpdateForm" collection="Posts" type="update" doc=getPost}} 7 {{> afQuickField name="title"}} 8 {{> afQuickField name="picture"}} 9 <button type="submit" class="btn btn-primary">Update</button> 10 {{/autoForm}} 11{{/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.
Multiple images //does not support 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: [String], 8 label: 'Choose file' # optional 9 }, 10 "pictures.$": { 11 autoform: { 12 afFieldInput: { 13 type: 'fileUpload', 14 collection: 'Images' 15 } 16 } 17 } 18})
Custom file preview
Your custom file preview template data context will be:
- file - fileObj instance
1picture: { 2 type: String, 3 autoform: { 4 afFieldInput: { 5 type: 'fileUpload', 6 collection: 'Images', 7 previewTemplate: 'myFilePreview' 8 } 9 } 10}
Custom upload template
Your custom file upload template data context will be:
- file - FS.File instance
- progress
- status
- Other fields from
FileUpload
instance
1picture: { 2 type: String, 3 autoform: { 4 afFieldInput: { 5 type: 'fileUpload', 6 collection: 'Images', 7 uploadTemplate: 'myFileUpload' 8 } 9 } 10}
1<template name="myFilePreview"> 2 <a href="{{file.link}}">{{file.original.name}}</a> 3</template>