v1.0.1

 - Overall enhancements
 - Fix #5

.versions

@@ -41,7 +41,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-ostrio:[email protected].0
+ostrio:[email protected].1
 ostrio:[email protected]
 ostrio:[email protected]
 [email protected]

README.md

@@ -2,12 +2,13 @@ Autoform File
 =============
 
 ### Description
-Upload and manage files with autoForm using ostrio:files.
-This was ported from yogiben:autoform-file to use ostiro:files instead of the now deprecated CollectionFS.
+Upload and manage files with autoForm via [`ostrio:files`](https://github.com/VeliovGroup/Meteor-Files). This package was ported from `yogiben:autoform-file` to use with [`ostrio:files`](https://github.com/VeliovGroup/Meteor-Files) instead of the already deprecated CollectionFS.
 
-### Quick Start
-##### 1. Install `meteor add ostrio:autoform-files`
-##### 2. Create your Files Collection (See [ostrio:files](https://github.com/VeliovGroup/Meteor-Files.git))
+### Quick Start:
+
+ - Install `meteor add ostrio:autoform-files`
+ - Install `meteor add ostrio:files`, *if not yet installed*
+ - Create your Files Collection (See [`ostrio:files`](https://github.com/VeliovGroup/Meteor-Files)))
 ```javascript
 var Images = new FilesCollection({
   collectionName: 'Images',
@@ -32,12 +33,12 @@ if (Meteor.isServer) {
   });
 }
 ```
-##### 3. Define your schema and set the `autoform` property like in the example below
-```javascript
-Schemas = {}
-
-Posts = new Meteor.Collection('posts');
+__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
+```javascript
+Schemas = {};
+Posts   = new Meteor.Collection('posts');
 Schemas.Posts = new SimpleSchema({
   title: {
     type: String,
@@ -48,7 +49,7 @@ Schemas.Posts = new SimpleSchema({
     autoform: {
       afFieldInput: {
         type: 'fileUpload',
-        collection: 'Images',
+        collection: 'Images'
       }
     }
   }
@@ -57,17 +58,13 @@ Schemas.Posts = new SimpleSchema({
 Posts.attachSchema(Schemas.Posts);
 ```
 
-The `collection` property is the field name of your files collection.
+The `collection` property must be the same as name of your *FilesCollection* (*case-sensitive*), `Images` in our case.
 
-##### 4. Generate the form with `{{> quickform}}` or `{{#autoform}}`
+ - Generate the form with `{{> quickform}}` or `{{#autoform}}`
 e.g.:
-```
+```html
 {{> quickForm collection="Posts" type="insert"}}
-```
-
-or
-
-```
+<!-- OR -->
 {{#autoForm collection="Posts" type="insert"}}
   {{> afQuickField name="title"}}
   {{> afQuickField name="picture"}}
@@ -121,6 +118,6 @@ picture: {
 
 ```html
 <template name="myFilePreview">
-  <a href="{{file.url}}">{{file.original.name}}</a>
+  <a href="{{fileURL file}}">{{file.original.name}}</a>
 </template>
 ```

lib/client/fileUpload.html

@@ -1,20 +1,23 @@
 <template name="afFileUpload">
   <input value="{{fileId}}" type="hidden" {{this.atts}}>
-  {{#if $gt uploadedFile.count 0}}
-    {{#each uploadedFile}}
-      <div>
+  {{#with uploadedFile}}
+    <div>
+      {{#if isImage}}
         {{> uploadImageDemo}}
-      </div>
-      <a data-action="remove-file">Remove</a>
-    {{/each}}
+      {{else}}
+        {{> uploadFileDemo}}
+      {{/if}}
+    </div>
+    <a data-remove-file>Remove</a>
   {{else}}
-    {{#if currentUpload}}
-      {{#with currentUpload}}
-        Uploading <b>{{file.name}}</b>: 
-        <span class="progress">{{progress}}%</span>
-      {{/with}}
+    {{#with currentUpload}}
+      Uploading <b>{{file.name}}</b>:
+      <span class="progress">{{progress}}%</span>
     {{else}}
-      <input class="form-control af-file-upload-capture" type="file"/>
-    {{/if}}
-  {{/if}}
+      <input data-files-collection-upload class="form-control af-file-upload-capture" type="file" />
+      {{#if error}}
+        <span class="help-block">{{error}}</span>
+      {{/if}}
+    {{/with}}
+  {{/with}}
 </template>

lib/client/fileUpload.js

@@ -1,7 +1,12 @@
 Template.afFileUpload.onCreated(function () {
+  this.collection = Meteor.connection._mongo_livedata_collections[this.data.atts.collection]
+  if (!this.collection) {
+    throw new Meteor.Error(404, '[meteor-autoform-files] No such collection "' + this.data.atts.collection + '"');
+  }
   this.collectionName = () => this.data.atts.collection
-  this.fileId = new ReactiveVar(this.data.value);
-  this.currentUpload = new ReactiveVar(false);
+  this.currentUpload  = new ReactiveVar(false);
+  this.fileId         = new ReactiveVar(this.data.value);
+  this.error          = new ReactiveVar(false);
   return;
 });
 
@@ -13,19 +18,28 @@ Template.afFileUpload.helpers({
     return Template.instance().fileId.get();
   },
   uploadedFile() {
-    let fId = Template.instance().fileId.get();
-    let file = global[Template.instance().collectionName()].find({_id: fId});
-    return file.cursor;
+    return global[Template.instance().collectionName()].findOne({
+      _id: Template.instance().fileId.get()
+    });
+  },
+  error() {
+    return Template.instance().error.get();
   }
 });
 
 Template.afFileUpload.events({
-  'click [data-action="remove-file"]'(e, t) {
-    t.fileId.set(false);
+  'click [data-remove-file]'(e, template) {
+    template.fileId.set(false);
+    try {
+      this.remove();
+    } catch (e) {}
     return;
   },
-  'change .af-file-upload-capture'(e, template) {
+  'change [data-files-collection-upload]'(e, template) {
     if (e.currentTarget.files && e.currentTarget.files[0]) {
+      const input  = $(e.currentTarget);
+      const parent = input.parent('.form-group');
+      parent.removeClass('has-error');
       const upload = global[template.collectionName()].insert({
         file: e.currentTarget.files[0],
         streams: 'dynamic',
@@ -37,9 +51,20 @@ Template.afFileUpload.events({
         return;
       });
 
+      upload.on('error', function (error) {
+        template.error.set(error.reason);
+        input.val('');
+        if (parent[0]) {
+          parent.addClass('has-error');
+        }
+        return;
+      });
+
       upload.on('end', (error, fileObj) => {
         if (!error) {
-          template.fileId.set(fileObj._id);
+          if (template) {
+            template.fileId.set(fileObj._id);
+          }
         }
         template.currentUpload.set(false);
         return;

lib/client/uploadFileDemo.html

@@ -0,0 +1,3 @@
+<template name="uploadFileDemo">
+  <a href="{{link}}?download=true" target="_top">{{name}}</a>
+</template>

lib/client/uploadImageDemo.html

@@ -1,3 +1,3 @@
 <template name="uploadImageDemo">
-  <img style="width:50%;" src="{{fileURL .}}"/>
+  <img style="width:50%;max-width:250px;max-height:250px;" src="{{link}}"/>
 </template>

package.js

@@ -2,7 +2,7 @@ Package.describe({
   name: "ostrio:autoform-files",
   summary: "File upload for AutoForm using ostrio:files",
   description: "File upload for AutoForm using ostrio:files",
-  version: "1.0.0",
+  version: "1.0.1",
   git: "https://github.com/VeliovGroup/meteor-autoform-file.git"
 });
 
@@ -18,8 +18,11 @@ Package.onUse(function(api) {
     'ostrio:[email protected]'
   ]);
 
-  api.addFiles('lib/client/autoform.js', 'client');
-  api.addFiles('lib/client/fileUpload.html', 'client');
-  api.addFiles('lib/client/fileUpload.js', 'client');
-  api.addFiles('lib/client/uploadImageDemo.html', 'client');
+  api.addFiles([
+    'lib/client/autoform.js',
+    'lib/client/fileUpload.html',
+    'lib/client/fileUpload.js',
+    'lib/client/uploadImageDemo.html',
+    'lib/client/uploadFileDemo.html'
+  ], 'client');
 });