Images uploaded through Collection FS only display after a refresh

Hi, everyone. I’m new to meteor so please ignore any stupidity in this question. I am using CollectionFS and GridFS to upload my images. When I submit my form, the contents are delivered, but I have to refresh the page in order for the images to display. Can anyone help me overcome this? Pages shout not have to refresh after a single file upload as that would amount to very poor user experience.

Client side code is;

Template.submit.events({
"submit form": function(event) {
    var name = event.target.name.value;
    var file = $('#productImage').get(0).files[0];
    if (file) {
        fsFile = new FS.File(file);
        ProductsImages.insert(fsFile, function(err, result) {
            if (!err) {
                var productImage =
                    '/cfs/files/ProductsImages/' +
                    result._id;
                Posts.insert({
                    name: name,
                    image: productImage
                });
            }
        });
    } else {
        var productImage = 'public/img/male.png';
        Posts.insert({
            name: name,
            image: productImage
        });
    }
    event.target.name.value = "";
    Router.go('/');
    return false;
}
});

Lib code is;

 Posts = new Mongo.Collection('posts');

ProductsImages = new FS.Collection("ProductsImages", {
stores: [new FS.Store.GridFS("ProductsImages")]
});

HTML is:;

{{#each posts}}

<li>This is my name: {{name}}</li>
<img src="{{image}}" height="100" width="100">
{{/each}}

Submit form

<input type="text" name="name" placeholder="name">
    <input type="file" name="productImage" id="productImage">
<input type="submit" name="submit" value="submit">

</form >

At the time when you build the productImage url the image is still not available on this url. A solution could be to modify your post on server side when the image is stored:

On Client:

  • First insert the post so you have the id
  • Insert the image with the postId as meta data

On Server:

ProductsImages.on('stored', Meteor.bindEnvironment(function(doc, store) {
    if(doc.collectionName === "ProductsImages") {
       var productImage =
                    '/cfs/files/ProductsImages/' +
                    result._id;
       Post.update({_id: doc.postId}, {$set: {image: productImage}})
    }
}));

Nice of you to reply, but my task isn’t an ‘update’, but a ‘create’. So the id cannot be created before the image is uploaded. It has to happen at the same time.

What I ment on the client side was something like this:

    if (file) {
           var postId=Posts.insert({
                        name: name,
                        image: 'public/img/male.png'
                    });
            fsFile = new FS.File(file);
            add postId to fsFile metadata
            ProductsImages.insert(fsFile, function(err, result) {

In this case your post will be shown with the default image until the image is stored and available on the server

Im afraid that will not be helpful. I want the image to arrive at the same time as the rest of the data. As it was in my tutorial