0

The situation: Im implementing image upload as profile pics on Meteor app using lepozepo:cloudinary package. So each user has 1 profile image. Uploading a new one will replace the photo. Similarly, deleting it will remove the only uploaded picture.

And so my questions are:

  • Do I need to have a Collection to store the images? I prefer to upload to cloud and get URL to display it based on userId.
  • Once picture is uploaded, how to I have a {{#if image}} then display uploaded pic, if not show default pic?
  • I think the upload stacks on and on. IS there any way I can specify maximim upload of 1 image. If upload another, then it will replace the existing?
  • How do i then only display the latest uploaded image?


The codes. ** config.js is set up on both server and client.

1) profile.js

Template.profile.events({
   'submit form': function(e, t) { 
      e.preventDefault(); 

      var files = [];
      var file = $('#userimage')[0].files[0]; 
      files.push(file);
      console.log(files);

      Cloudinary._upload(files[0], {}, function(err, res) {
         if (err){
            console.log("Error: " + err);
         } else {
            console.log("Success :" + res);
         }
      }); 

   }

});

2) profile.html 

  <form>
     <input type="file" id="userimage" name="userimage" class='upload_field cloudinary_fileupload' />
        <div class="progress_bar" style='background-color: red, height: 20px'>
        <div class='thumbnails'></div>
     <button type="submit"> Upload </button>
     <button type="delete"> Clear </button>
  </form>
Thinkerer
  • 1,606
  • 6
  • 23
  • 43

1 Answers1

1

I suppose you are familiar with Meteor:

  • Do I need to have a Collection to store the images? I prefer to upload to cloud and get URL to display it based on userId.

You definitely need to store the result in your db, because this is the user's avatar and one user has only one avatar. So I suggest storing it in the User collection

  • Once picture is uploaded, how to I have a {{#if image}} then display uploaded pic, if not show default pic?

If you decide to store the image in a collection, User for ex, then after uploading you need to insert/update the result to that collection. Then reactivity should solve the problem (of course you have to subscribe and retrieve the value inside image helper)

  • I think the upload stacks on and on. IS there any way I can specify maximum upload of 1 image. If upload another, then it will replace the existing?

I don't quite understand this question, but you could always disable the update form while there is an unfinished uploading process

  • How do i then only display the latest uploaded image?

After uploading, just update the latest result to your db.

kkkkkkk
  • 7,628
  • 2
  • 18
  • 31
  • Im ok, not too familiar. i dont have User collection as Im using the one inbuilt in Meteor. Is it possible to have say Images collection, and tag it under the current user? i.e userId: Meteor.userId()? If not how should I go about setting up User collection? – Thinkerer Nov 24 '16 at 14:39
  • You are using the account system built-in in Meteor right? that means you do have a user collection. Meteor creates a collection named `users` in Mongodb for you when you add the `accounts-*` package. To store the avatar just update it to your user document: `Meteor.users.update({_id: Meteor.userId()}, {$set: {'profile.avatar': public_id}});` – kkkkkkk Nov 24 '16 at 14:46
  • I have marked this as an answer. Also I met with a further error, and have posted it here http://stackoverflow.com/questions/40992614/public-id-is-not-defined-meteorcloudinary – Thinkerer Dec 07 '16 at 01:42