How to store an array of images in Meteor?


#1

I’m trying to store an array of images within another collection, like this:

`Lobbies = new Mongo.Collection('lobbies');

Images = new Mongo.Collection('images');

Images.attachSchema(new SimpleSchema({
image: {
    type: String,
    autoform: {
        afFieldInput: {
            type: 'cloudinary'
        }
    }
}
}));


LobbySchema = new SimpleSchema({
image: [Images]
});

Obviously the image: [Images] part is incorrect, but what would be the best way to go about storing arrays of images?

What I’m trying to do is allow users to upload an image, at which point this image would be added to the appropriate Lobby collection’s corresponding array of images.

Any advice would be greatly appreciated.


#2

Inside the LobbySchema collection you either:

  • Store an array of image _id’s where these id’s come from the documents inside the Images collection. That way you can search inside of the Images collection for the correct image and return the url.
  • Store an array of url’s returned from cloudinary directly

Both would work fine, when storing the url directly you could still look up the corresponding image in the Images collection by querying for the url instead of the _id, so it’s fully up to you. (I’d store the id’s fyi)


#3

Hi, thanks for the response! I’ve searched around a bit but I can’t seem to find how to store an array of id’s based on a collection. I’m trying to write something like type: [Images._id] but that isn’t right. What would be the best way to store this array of Image id’s?

Also, if I’m understanding correctly the process for adding images would be like this: upload an image (via the cloudinary-autoform package), at which point this image’s _id is added to the LobbySchema’s array of id’s (assuming my form is posting data to the Lobbies collection). Does that sound right? Essentially what I’m trying to do is let someone create a new Lobby where people can upload photos to it if they know the unique URL, so once someone has created a Lobby/is in a Lobby, I want them to be able to upload photos which will then be part of that Lobby’s slideshow.


#4

You store them as an array of strings:

LobbySchema = new SimpleSchema({
    image: {
        type: [String]
    }
});

How exactly autoform works I have no idea since I’ve never used it, but I’m sure there are ways to get the id of the images you’ve uploaded.