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):
SimpleSchema.setDefaultMessages({
initialLanguage: 'en',
messages: {
en: {
uploadError: '{{value}}', //File-upload
},
}
});
- Create your Files Collection (See
ostrio:files
)
var Images = new FilesCollection({
collectionName: 'Images',
allowClientCode: true, // Required to let you remove uploaded file
onBeforeUpload: function (file) {
// Allow upload files under 10MB, and only in png/jpg/jpeg formats
if (file.size <= 10485760 && /png|jpg|jpeg/i.test(file.ext)) {
return true;
} else {
return 'Please upload image, with size equal or less than 10MB';
}
}
})
if (Meteor.isClient) {
Meteor.subscribe('files.images.all');
}
if (Meteor.isServer) {
Meteor.publish('files.images.all', function () {
return Images.collection.find({});
});
}
Note: Images
variable must be attached to Global scope. And has same name (case-sensitive) as collectionName
option passed into FilesCollectio#insert({collectionName: 'Images'})
method, Images
in our case.
- 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',
uploadTemplate: 'uploadField' // <- Optional
previewTemplate: 'uploadPreview' // <- Optional
}
}
}
});
Posts.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 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}}
Update mode:
{{#if Template.subscriptionsReady }}
{{> quickForm collection="Posts" type="update" doc=getPost}}
{{/if}}
<!-- OR -->
{{#if Template.subscriptionsReady }}
{{#autoForm 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.
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
Schemas.Posts = new SimpleSchema({
title: {
type: String,
max: 60
},
pictures: {
type: [String],
label: 'Choose file' # optional
},
"pictures.$": {
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images'
}
}
}
})
Custom file preview
Your custom file preview template data context will be:
- file - fileObj instance
picture: {
type: String,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images',
previewTemplate: 'myFilePreview'
}
}
}
Custom upload template
Your custom file upload template data context will be:
- file - FS.File instance
- progress
- status
- Other fields from
FileUpload
instance
picture: {
type: String,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images',
uploadTemplate: 'myFileUpload'
}
}
}
<template name="myFilePreview">
<a href="{{file.link}}">{{file.original.name}}</a>
</template>