Access and View Images


How would you access a folder full of images, get the url for each image and put it in an array, then {{each}} over that array to display each image on a page of my choosing? Everyone keeps saying CollectionFS, but for some reason, when I set it up:

var imageStore = new FS.Store.FileSystem('images', {
	path: '~/category/engagements'

Images = new FS.Collection('images', {
	stores: [imageStore]

I can access Images in the console, but the array is empty. Isn’t this all I need to do?


CollectionFS stores a collection based on your files.

Pre-existing files don’t exist inside the collection so you can’t find them.

If your images are static, you don’t need CFS. CFS is useful for uploaded files and management of those files.


So how do I automatically scan, grab the file names and path of static images so I can then place them on a page of my choosing? I know this is probably simple, just not sure of the syntax to make it happen.


Place them in the public folder and link to them?

What are you’re requirements for these images? Are they User or Client defined? Do they Change? How are they used?


I am trying to make a basic photo gallery website for my sister. She is getting into photography pretty serious, has a ton of images now, and I’m just trying to display those images that she has already. Basically for her portfolio page. Eventually, yes, I’d like to be able to upload files, but just trying to display what she’s got right now.


I’d advise scanning through the folder using FS and then inserting them into a CFS collection. So CFS knows about them.

At that point you’d have queryable images which should be good for categorization etc of photos.


That’s the problem, I have no idea how to do what you just suggested. I thought I was doing it correctly by following tutorials, but obviously I missed the mark somewhere.


Looking at my code above, isn’t that what I was doing though, scanning through and adding them to the collection? The collection kept coming up empty in the console, but it was present though. It’s like the scanning never happened.


No, you were registering an empty image store and then asking why it was empty :frowning:

CFS(At least to the best of my knowledge) won’t pre-load folder contents.(So it won’t touch your existing files)

Its expecting Images.insert() which would then store the image in that folder.

Its important to think of CFS as a storage medium combined with a document collection. The collection’s document points to the file’s location.

A node FS guide/tutorial

Your goal is probably to loop through the folder of pre-existing images in a temporary directory and add them to the CFS collection , so CFS knows about them and they get added to their permanent location with a matching CFS document. Which is basically a batch upload.

It might be easier to code your image upload form first and then just upload the images.

tl;dr I don’t think CFS allows pre-seeded folders.


Okay, great info, thank you! I’ll read through the guide you linked me to and see if that helps.


Yup, just checked the code.

No attempt made to scan for pre-existing files.

Good Luck!