Cloudinary Image/File Uploader

Cloudinary provides a simple way for uploading files to Cloudinary, which in turn can be set up to sync with your Amazon S3 service. This is useful for uploading and actively manipulating images and files that you want accesible to the public. Cloudinary is built on Cloudinary (NPM) and Cloudinary (JS). Installing this package will make Cloudinary available server-side and $.cloudinary available client-side.

Show your support!

Star my code in github or atmosphere if you like my code or shoot me a dollar or two!

DONATE HERE

BREAKING CHANGES

{{#c_upload}} does not exist anymore All core methods and functions have been renamed and rewritten

This package does not use Streams anymore and uploads directly from the client to cloudinary!

NEW FEATURE

CLIENT TO CLOUDINARY UPLOADS! Images will not stream to your server anymore, they will stream directly to cloudinary.

Installation

$ meteor add lepozepo:cloudinary

How to upload

Step 1

Configure your Cloudinary Credentials. SERVER SIDE AND CLIENT SIDE.

1#SERVER
2Cloudinary.config
3	cloud_name: 'cloud_name'
4	api_key: '1237419'
5	api_secret: 'asdf24adsfjk'
6
7#CLIENT
8$.cloudinary.config
9	cloud_name:"cloud_name"
10

Step 2

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

1Template.yourtemplate.events
2	"change input[type='file']": (e) ->
3		files = e.currentTarget.files
4
5		Cloudinary.upload files,
6			folder:"secret" # optional parameters described in http://cloudinary.com/documentation/upload_images#remote_upload
7			(err,res) -> #optional callback, you can catch with the Cloudinary collection as well
8				console.log "Upload Error: #{err}"
9				console.log "Upload Result: #{res}"
10

How to read and manipulate

All of Cloudinary's manipulation options are available in the c.url helper. You can access an image by passing a cloudinary public_id and format:

<img src="{{c.url public_id format=format}}">

You can manipulate an image by adding parameters to the helper

<img width="250" src="{{c.url public_id format=format effect='blur:300' angle=10}}">

Obs: If you want to resize your image in a smaller size you will need to pass the crop parameter

<img src="{{c.url public_id width=250 height=250 crop="fill"}}">

For more information see the cloudinary's documentation: http://cloudinary.com/documentation/image_transformations#crop_modes

Compatibility

You can use the collection-hooks package to hook up to the offline collection Cloudinary.collection.

Here are all the transformations you can apply: http://cloudinary.com/documentation/image_transformations#reference

How to delete from Cloudinary

Just pass the public_id of the image or file through this function (security features pending). It will return an object with a list of the images deleted as a result.

1Template.yourtemplate.events
2	"click button.delete": ->
3		Cloudinary.delete @response.public_id, (err,res) ->
4			console.log "Upload Error: #{err}"
5			console.log "Upload Result: #{res}"

Notes

A security filter is missing, I know how I want it to work I just haven't had the time to build it. Enjoy the new version!