veliovgroup/meteor-autoform-file

Update mode example

aposidelov opened this issue · 5 comments

Here is an example how to implement autoform with update mode & upload field. Critical place is that 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. Also to make upper {{#if}} to be worked the template level subscription should be used (this.subscribe instead of Meteor.subscribe)

EditProductForm.js

Template.EditProductForm.onCreated(function() {    
    var self = this;        
    self.autorun(function() {   
        var id = FlowRouter.getParam('id');            
        self.subscribe('products.one', id);        
    });
});

Template.EditProductForm.helpers({
    getProduct() {
        var id = FlowRouter.getParam('id');
        var product = ProductsCollection.findOne(id);        
        return product;
    }
});

EditProductForm.html

<template name="EditProductForm">
    <div class="container">
        <div class="row">       
            {{#if Template.subscriptionsReady }}    
                {{#autoForm type="update" doc=getProduct collection=ProductsCollection  id="EditProductForm"}}
                    {{> afQuickField name='title'}}
                    {{> afQuickField name='desc'}}
                    {{> afQuickField name='priceAmount'}}
                    {{> afQuickField name='tags'}}
                    {{> afQuickField name='picture'}}     
                    <button type="submit" class="btn btn-primary btn-update">Update</button>
                    <button type="submit" class="btn btn-primary btn-delete">Delete</button>
                {{/autoForm}}
            {{/if}}
        </div>
    </div>
</template>

and server-side code

Meteor.publish('products.one', function(id) {       
    var product = ProductsCollection.find({_id: id});   
    var pictureId = product.fetch()[0].picture; 
    return [product, Images.find({_id: pictureId}).cursor]; 
});

HI @aposidelov ,

Looks good to me. What should I do with it?

just mark it as an example or link to it in the package description section where insert mode is described

@aposidelov okay, now it's clear.
Would you send a PR?

Thank you for contribution.
Ans sorry for delay with it.