CODEWITHSUNDEEP
meteor
anon
anon

Reputation: 2353

How to integrate Cloudinary with Meteor

I want users to upload photos for their profile and I want to display their photo on the navbar when they're logged in.

These are the instructions for the lepozepo:cloudinary package (I am open to other alternatives):

Step 1

SERVER

Cloudinary.config
    cloud_name: 'cloud_name'
    api_key: '1237419'
    api_secret: 'asdf24adsfjk'

CLIENT

$.cloudinary.config
    cloud_name:"cloud_name"

Step 2

Wire up your input[type="file"]. CLIENT SIDE.

Template.yourtemplate.events
    "change input[type='file']": (e) ->
        files = e.currentTarget.files

        Cloudinary.upload files,
            folder:"secret" # optional parameters described in http://cloudinary.com/documentation/upload_images#remote_upload
            (err,res) -> #optional callback, you can catch with the Cloudinary collection as well
                console.log "Upload Error: #{err}"
                console.log "Upload Result: #{res}"

For each of the steps, I'm not sure where to place the code. For example, I don't know where I should put Cloudinary.config. Where at on the server?

Title
client
  -helpers
    config.js
  -stylesheets
  -templates
    profile
      profile.html
      profile.js
  -main.html
  -main.js
lib
  -collections


server
  -config
    *cloudinary.js
  -fixtures.js
  -publications.js

cloudinary.js

Cloudinary.config({
  cloud_name: '***',
  api_key: '***',
  api_secret: '***'
});

profile.html

<template name="profile">
  <div>
    <form>
     <input type="file" id="userimage" name="userimage"/>
     <button type="submit">Upload</button>
    </form>
  </div>
</template>

profile.js

Template.profile.events({
  // Submit signup form event
  'submit form': function(e, t){
      // Prevent default actions
      e.preventDefault();

  var file = $('#userimage')[0].files[0];
  console.log(file)
  Cloudinary.upload(file, function(err, res) {
        console.log("Upload Error: " + err);
        console.log("Upload Result: " + res);
      });
  }
});

Upvotes: 2

Views: 1975

Answers (1)

Jose Osorio
Jose Osorio

Reputation: 939

let me help you.

I assume that you project structure is something like:

  /main
    /client
      client.js
    /server
      server.js

Ok, lepozepo:cloudinary is written in coffescript but you can use it with vanilla javascript, so with the the folder structure showed above, you can use the following code:

client.js
$.cloudinary.config({
cloud_name: "yourname"
});

sometemplateveent({
  .... some event code
  Cloudinary.upload(files,{}, function(err, img) {
   ... do something when uploaded
  });

});

and then.

server.js

Cloudinary.config({
 cloud_name: 'yourname',
 api_key: 'somekey',
 api_secret: 'someapisecret'
});

If you need help with the submit event + upload the image you can read this post: Meteor: Cloudinary

Upvotes: 6

Related Questions