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.
- 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.:
{{> 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}}
{{#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.
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'
}
}
}
})
Your custom file preview template data context will be:
- file - fileObj instance
picture: {
type: String,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'Images',
previewTemplate: 'myFilePreview'
}
}
}
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>