How to retrieve FS Collection Image from DB

help
1

Hi all, I am working on a existing Meteor project. I have a Schema as shown below,

Activities.schema = new SimpleSchema({
  title: {
    type: String,
    label: 'Title',
    index: 1,
  },

export const ActivitiesImages = new FS.Collection('activitiesImages', {
  stores: [
    new FS.Store.GridFS('homeActivitiesImages', { transformWrite: homeActivityImage }),
    new FS.Store.GridFS('origActivitiesImages', {}),
  ],
  filter: {
    maxSize: 1024 * 1024 * 5,
    allow: {
      contentTypes: ['image/*'],
    },
  },
});
.........
)}

And I found Insert code as below

 const insertObj = {
        title,
        description,
        type: [type],
        divisions: [],
        clubType,
        createdBy,
        privateType,
      };

      if (image) {
        insertObj.image = ActivitiesImages.insert(image);
      }

      Meteor.call('v1/insertActivity', insertObj, (error) => {
        if (error) {
          sAlert.error(error.message);
        } else {
          sAlert.success('Activity added');
          $('.activity-modal').modal('hide');
        }
      });

Now My requirement is, I wanted to display the above stored image in the below Jade Template. I am finding difficulties in rendering the same.

MyProfile.tpl.jade (Jade Template)

 each activity in fiveStarActivities
                          .slider__item
                            .ui.segment
                                .ui.vertical.segment
                                    h3.ui.header.center.aligned {{activity.title}}
                                    .ui.list
                                        .item
                                            img(
                                                src="{{HERE I WANT TO DISPLAY IMAGE}}"
                                                alt="image description"
                                            ).ui.fluid.rounded.image
                                        .item     
                                            .ui.vertical.segment.big-card__btn-src
                                                button.ui.mini.grey.basic.button {{activity.title}}
                                        .item    
                                            p {{activity.description}}

I have tried the below but did not work.
MyProfile.js

    activityImage(activity) {
        return ActivitiesImages.findOne({ _id: activity.image._id });
    },

Can someone assist me how to display the image ?

2

I have resolved this by changing template as shown below.

MyProfile.tpl.jade

each activity in fiveStarActivities
	  .slider__item
		.ui.segment
			.ui.vertical.segment
				h3.ui.header.center.aligned {{activity.title}}
				.ui.list
					if activityImage activity
					  with activityImage activity
						.item
							img(
								src="{{this.url store='homeActivitiesImages'}}"
								alt="image description"
							).ui.fluid.rounded.image.medium

MyProfile.js

ActivitiesImages.findOne({ _id: activity.image._id });
3

Glad it works so Iā€™d just want to add this: if you have a Mongo provider like Atlas or any other third party and you need to pay for the traffic, you could consider a CDN instead and only keep links for media in your DB.

1 Like