Skip to content

Instantly share code, notes, and snippets.

@zh4ngx
Created September 6, 2012 19:23
Show Gist options
  • Save zh4ngx/3659690 to your computer and use it in GitHub Desktop.
Save zh4ngx/3659690 to your computer and use it in GitHub Desktop.
CarrierWave Image Preview/Upload
.river-pics
= profile_image_for current_user
%p #{current_user.first_name}, #{current_user.age}
.blurb
%p
#content
%h1 Satisfied?
%p Hover your mouse over your picture.
%p This is how others will see you.
#buttons
= link_to 'Yes, looks good.', '#', onclick: 'updateUser()'
= link_to 'No, go back', '#', {rel: 'modal:close'}
= stylesheet_link_tag 'edit'
#profile-content
%h1 #{@step_text}Share a little about yourself.
%h2 You can change these settings at any time.
#blurb
%h3 Write a short blurb about yourself.
= form_for current_user, html: {multipart: true} do |f|
= f.text_area :blurb
%p.countdown
#picture
%h3 Choose a picture for others to see.
= profile_image_for current_user
#upload-pic
= form_for current_user, html: {multipart: true} do |f|
= f.file_field :image
= f.submit 'Upload Picture'
#buttons
.submit#edit-user
= link_to 'Preview', '#'
.cancel#edit-user
- if @step
= link_to 'Finish later', root_path(step: '2')
- else
= link_to 'Cancel', root_path
#profile-modal= render 'users/profile_preview'
class ImageUploader < CarrierWave::Uploader::Base
include Cloudinary::CarrierWave
process :convert => 'png'
process :tags => ['post_picture']
version :standard do
process :resize_to_fill => [180]
end
version :thumbnail do
process :resize_to_fit => [50, 50]
end
end
class User < ActiveRecord::Base
has_secure_password if ![:uid]
mount_uploader :image, ImageUploader
attr_accessible :first_name, :email, :password, :password_confirmation, :city_id, :age_min, :age_max, :activated, :blurb, :step, :birthday, :gender, :image
# other stuff omitted
end
$ ->
# Post the user's prefs (upon text_field change)
@updateUser = ->
$('form.edit_user').submit()
@zh4ngx
Copy link
Author

zh4ngx commented Sep 6, 2012

Cloudinary upload works, but can't figure out how to get preview before upload (and hopefully reference that preview in another view/partial).

Options I've come across so far:

  • HTML5 - fileAPI
  • JQuery Image Preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment