Upload profile photo

[jgrape]

As a user I can upload a profile photo so that I don't have to use the complicated service gravatar.com to show my fellow users what I look like

Acceptance criteria:

• The stored profile photo must be no bigger than 80x80 pixels to conserve space
• Users can only upload profile photos for their own profile, but adminitrators can upload images for others too
• The solution must work on Heroku, where the file system is not accessible

---

Trello: https://trello.com/c/QTeX9vf2

[jgrape]

One idea would be to use another service for storing the images, like Dropbox.

Another would be to store the files in the PostgreSQL database as some kind of binary objects.

[jgrape]

Some resources: https://github.com/sksamuel/scrimage http://jasny.github.io/bootstrap/javascript/#fileinput http://wsnippets.com/fancy-profile-image-upload-crop-jquery-ajax-php/ http://odyniec.net/projects/imgareaselect/ http://blueimp.github.io/jQuery-File-Upload/basic.html http://deepliquid.com/content/Jcrop.html

[jgrape]

https://addons.heroku.com/cloudinary storage and manipulation of images

http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries

[jgrape]

Possible implementation plan:

1. Select to upload new profile photo => wizard starts
2. Select and upload image, store on Cloudinary in original size. https://github.com/cloudinary/cloudinary_scala http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
3. Crop & rezise image interactively using ImageAreaSelect. http://odyniec.net/projects/imgareaselect/examples.html#fixed-aspect-ratio
4. Post coordinates to SignUp who stores them with the Cloudinary URL. http://odyniec.net/projects/imgareaselect/examples-callback.html#submitting-selection-coordinates
5. Compose a Cloudinary URL that crops and resizes on the fly to be used by SignUp. http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries