How to integrate Cloudinary with Meteor - meteor

Question

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);
});
}
});

Answer 1

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