Add preview image in the User edit form

This commit is contained in:
Petko Bordjukov 2014-08-31 19:29:19 +03:00
parent da666d11d0
commit 09b737264f
5 changed files with 32 additions and 6 deletions

View File

@ -20,12 +20,14 @@ gem 'devise'
gem 'devise-i18n' gem 'devise-i18n'
gem 'simple_form' gem 'simple_form'
gem 'simple_form_fancy_uploads', github: 'apeacox/simple_form_fancy_uploads'
# Phone validation # Phone validation
gem 'phony_rails' gem 'phony_rails'
# Picture uploads # Picture uploads
gem 'carrierwave' gem 'carrierwave'
gem 'rmagick'
gem 'capistrano' gem 'capistrano'
gem 'capistrano-rails' gem 'capistrano-rails'

View File

@ -1,3 +1,12 @@
GIT
remote: git://github.com/apeacox/simple_form_fancy_uploads.git
revision: a135aad8f17cbf219a30ce5a30709406e277f7e0
specs:
simple_form_fancy_uploads (0.1.0)
carrierwave
rails (>= 4.0.0)
simple_form (~> 3.0)
GEM GEM
remote: https://rubygems.org/ remote: https://rubygems.org/
specs: specs:
@ -167,6 +176,7 @@ GEM
rb-inotify (0.9.5) rb-inotify (0.9.5)
ffi (>= 0.5.0) ffi (>= 0.5.0)
ref (1.0.5) ref (1.0.5)
rmagick (2.13.3)
rspec (3.0.0) rspec (3.0.0)
rspec-core (~> 3.0.0) rspec-core (~> 3.0.0)
rspec-expectations (~> 3.0.0) rspec-expectations (~> 3.0.0)
@ -266,9 +276,11 @@ DEPENDENCIES
rails (= 4.1.5) rails (= 4.1.5)
rails-erd rails-erd
rails-i18n rails-i18n
rmagick
rspec-rails rspec-rails
sass-rails (~> 4.0.3) sass-rails (~> 4.0.3)
simple_form simple_form
simple_form_fancy_uploads!
slim-rails slim-rails
spring spring
spring-commands-rspec spring-commands-rspec

View File

@ -28,6 +28,18 @@
width: 50em; width: 50em;
} }
img {
padding: 5px;
display: block;
border: 1px solid #CCC;
background-color: #F1F1F1;
}
img+input.image_preview {
margin-left: 12.7em;
}
} }
.input label.boolean { .input label.boolean {

View File

@ -1,7 +1,7 @@
class PictureUploader < CarrierWave::Uploader::Base class PictureUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support: # Include RMagick or MiniMagick support:
# include CarrierWave::RMagick include CarrierWave::RMagick
# include CarrierWave::MiniMagick # include CarrierWave::MiniMagick
# Choose what kind of storage to use for this uploader: # Choose what kind of storage to use for this uploader:
@ -30,9 +30,9 @@ class PictureUploader < CarrierWave::Uploader::Base
# end # end
# Create different versions of your uploaded files: # Create different versions of your uploaded files:
# version :thumb do version :thumb do
# process :resize_to_fit => [50, 50] process :resize_to_fit => [50, 50]
# end end
# Add a white list of extensions which are allowed to be uploaded. # Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this: # For images you might use something like this:

View File

@ -1,9 +1,9 @@
= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, multipart: true }) do |f|
.form_inputs .form_inputs
h2.entry-title Лекторски профил h2.entry-title Лекторски профил
= f.error_notification = f.error_notification
= f.simple_fields_for :speaker_profile do |ff| = f.simple_fields_for :speaker_profile do |ff|
= ff.input :picture, as: :file = ff.input :picture, as: :image_preview, input_html: {preview_version: :thumb}
= ff.input :first_name, autofocus: true = ff.input :first_name, autofocus: true
= ff.input :last_name = ff.input :last_name
= ff.input :public_email = ff.input :public_email