[SOLVED] How to display images from collection that used ostrio:file package?

help
1

The website i created has a upload button for user to upload their image, but after all the image are uploaded, it cannot be displayed. Here is my code:

//Server
Meteor.publish('files.all', ()=> {
    return Images.collection.find({});
});

//Client
Meteor.subscribe('files.all');

Template.displayImg.helpers({
    images: Images.collection.find({})
});

//HTML
<template name="album">
    <div class="row">
        {{#each images}}
        <div class="col-md-3 col-xs-12">
            <div class="thumbnail">
                <img src="{{fileURL images 'thumb'}}" alt="{{images.name}}/>
            </div>
        </div>  
        {{/each}}
    </div>
</template>

The upload part does not have any problem, and i can find all my images from database.

I follow the documentation from :
[https://github.com/VeliovGroup/Meteor-Files/wiki/Template-Helper]
At the display thumbnail part i change from findOne to find, change their collection name to mine and write an Each statement to iterate through collection to get every image in the collection to display in HTML. Well actually i don’t really understand much from the documentation so please help guide me and thanks very much. If i miss anything or made anything mistake in this post, please tell and i will correct it.

2

I already solved the problem, but i think this is not a practical way to do it, but here is the step i did: I first tested to display only one images, according to doc, I have to create a helper template:

Template.img.helpers({
  image : Images.findOne()
});

I extracted the link from helper to src

<img src="image.link"/>

As it works to appear only 1 image, i try to console findOne().link() to see where it is from, then i extract the path and change only the id of each images so then i could display it all now, and here’s the code:

//Assume already publish and subscribe
//Client
Template.img.helpers({
  album: Images.find()
});

//HTML
{{#each album}}
    <img src="http://localhost:3000/cdn/storage/images/{{_id}}/original/{{_id}}{{extensionWithDot}}"/>
{{/each}}

The http:…storage/ is the path i extracted from the link() that i found, /images is the collection name and {{_id}} is the id of each images, /original is the folder that store the images, follwow along with image id + their extension, i found the extensionWithDot property by doing console log the findOne then you will see the object and all the properties there.

1 Like
3

Im having the sam issue as you. More or less the same code. But I cannot get more than one picture. Moreover, when I try to iterate album, I get this error:
Error: {{#each}} currently only accepts arrays, cursors or falsey values.

But Im not referring anymore to fineOne, but to find(). Still doesn’t seem I get an array. or whats wrong? Any clue anybody?

4

I have exactly the same problem that you describe, Try to call fetch() on collection after method find()

2 Likes
5

I know it’s probably late for an answer, but you should use FilesCursor#each method to iterate over all files in a FilesCursor.

I hope this will be helpful for somebody, who have ran into the same issue.

1 Like