# meteor@>=1.9
meteor add ostrio:autoform-files
# meteor@<1.9
meteor add ostrio:[email protected]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-schemaNPM 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)
import { Meteor } from 'meteor/meteor';
import { FilesCollection } from 'meteor/ostrio:files';
const imagesCollection = new FilesCollection({
collectionName: 'images',
allowClientCode: true, // Required to let you remove uploaded file
onBeforeUpload(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;
}
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', () => {
return imagesCollection.collection.find({});
});
}Note: If you don't use Mongo Collection instances (dburles:mongo-collection-instances), then the imagesCollection 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
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
insertConfig: { // <- Optional, .insert() method options, see: https://github.com/veliovgroup/Meteor-Files/blob/master/docs/insert.md
meta: {},
isBase64: false,
transport: 'ddp',
chunkSize: 'dynamic',
allowWebWorkers: true
}
}
}
}
});
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.:
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.
You can configure the file selector, to only allow certain types of files using the accept property:
Schemas.Posts = new SimpleSchema({
title: {
type: String,
max: 60
},
picture: {
type: String,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'images',
accept: 'image/*' // or use explicit ext names like .png,.jpg
}
}
}
});The accept values works makes use of the native HTML accept attribute. Read more at the MDN documentation.
Please read the section on custom upload templates and how to integrate configs like accept to your custom template.
Multiple images — not fully supported 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: Array,
label: 'Choose file' // <- Optional
},
'pictures.$': {
type: String,
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
- config an object containing several configs to upload behavior, such as
accept - Other fields from
FileUploadinstance
({
picture: {
type: String,
autoform: {
afFieldInput: {
type: 'fileUpload',
collection: 'images',
uploadTemplate: 'myFileUpload'
}
}
}
});If you pass any config, like accept your upload data won't be falsy anymore,
so you should update your template to the example above and check for each of the given properties.
This is however backwards-compatible and will not break your older templates if you don't need any of the upload config
introduced in > 2.1.4 releases.
- Sponsor via GitHub — support open source contributions on a regular basis
- Support via PayPal — support our open source contributions
- Use ostr.io — Monitoring, Analytics, WebSec, Web-CRON and Pre-rendering for a website
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
