ostrio:autoform-files

v2.0.1Published 7 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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});
1var Images = new FilesCollection({
2  collectionName: 'Images',
3  allowClientCode: true, // Required to let you remove uploaded file
4  onBeforeUpload: function (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', function () {
20    return Images.collection.find({});
21  });
22}

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
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 collection="Posts" type="insert"}}
2<!-- OR -->
3{{#autoForm 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 collection="Posts" type="update" doc=getPost}}
3{{/if}}
4<!-- OR -->
5{{#if Template.subscriptionsReady }}
6  {{#autoForm 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:

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>