How to show correct profile picture Meteorjs

Question

I am using CollectionFs to Upload profile pictures. Uploading and storing the image is successful. I can insert and show the image alright for one user but the problem is: For multiple users, when a user visit other users profiles, He sees his own picture rather than seeing the profile owner's picture!

I understand its the mongo query I have in my helper function thats causing the issue but can't just get it to work no matter how many "This._id" I Try.

Here is the javaScript

 Router.route('show',{
  path:'/list/:_id',
  data: function(){
return Main_database.findOne({_id: this.params._id});


  }

});

 Template.upload.events({
  'change #exampleInput':function(event, template){  
    var file = $('#exampleInput').get(0).files[0]; 
    fsFile = new FS.File(file);
    fsFile.metadata = {ownerId:Meteor.userId()}
    Images.insert(fsFile,function(err,result){
      if(!err){
        console.log("New images inserted")
      }
    })
  }
});

Template.profile.helpers({
    profilePic: function () {
      return Images.find({'metadata.ownerId':Meteor.userId()});
    }
  });

And here is the html:

<template name="upload">
  <div class="container">
     <div class="row">
        <input type="file" 
        id="exampleInput"> 
     </div>  
  </div>
</template>


 
<template name="profile">

       {{#each profilePic}}       
          <img src="{{this.url}}" 
          height="400" width="400" 
          class="img-circle">
       {{/each}}  
 
</template>

Thanks

B.s : after following the answer given, I attached the photo in the profile.xxx field. But its still showing the wrong picture. The mongo query is still showing the wrong picture.

here is the code,

Router.route('show',{
  path:'/list/:_id',
  data: function(){
return Main_database.findOne({_id: this.params._id});


  }

});

Template.upload.events({
  'change #exampleInput':function(event, template){  
    var file = $('#exampleInput').get(0).files[0]; 
    newFile = new FS.File(file);
    newFile.metadata = {'ownerId':Meteor.userId()};
    Images.insert(newFile,function(err,result){
      if(!err){
        console.log(result._id);
        Meteor.users.update(Meteor.userId(),{
       $set: {
         'profile.profilePic': result._id

       }
     });
       }
     });

      }
    })



// .....................profile pic.............


Template.profile.helpers({
    profilePicture: function () {
      return Images.find({'_id':Meteor.user().profile.profilePic});
    }
  });

Answer 1

Finally was able to do it. Being a beginner, I was stuck at uploading images and then showing them for my users for days. Tried almost each method out there, none worked. asked everywhere, none of the answer worked. Finally , a dead simple package from cosio55:autoform-cloudinary worked like magic!!! Just take a look at the problems I faced while using these packages:

1. cfs:ui

{{#with FS.GetFile "images" selectedImageId}} // image url {{/with}}

problem:

with this was I couldn't get the selectedImageId .

2. cfs:gridfs

problem :

grid fs stores image in a separate collection. My user list uses iron router to show the user list form another collection. Image was getting uploaded into the images collection. But For the love of my life, I couldn't show them correctly. Each user was seeing his own picture rather than the profile owner's picture. happened because of a wrong mongo query but I couldn't get the right query. Tried attaching the photo in the profile.profilePicture, but same problem of wrong image stayed.

And I had to put the upload photo in a separate page and NOT in the autoform.

3. lepozepo:cloudinary Problem: Image uploaded fine. But had problem getting /storing the image url. Couldn't get

And I had to put the upload photo in a separate page and NOT in the autoform.

public_id ????? Got lost there.

4. autoform-file by yogiben

same problem as GridFs.

Finally with this cosio55:autoform-cloudinarypackage took me just a minute to figure things out. A minute vs days of other big name packages!!!!

:smiley:

<div> <img src=" {{image}}" alt=""> Image </div>

just add {{image} in the img source and thats it. The image url is stored in the same collection autoform stores everything.

Cheers Mates.