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 - Create your Files Collection (See
ostrio:files)
var Images = new FilesCollection({
collectionName: 'Images',
allowClientCode: false, // Disallow remove files from Client,
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
autoformproperty 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.:
{{> 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 //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
FileUploadinstance
picture: {
type: String,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images',
uploadTemplate: 'myFileUpload'
}
}
}<template name="myFilePreview">
<a href="{{file.link}}">{{file.original.name}}</a>
</template>
