WDE-Slides-10.pptx
Web System Development with
Ruby on Rails
Day 10(1/Dec/2016)
File uploading and Image Display
Today’s Theme
p Upload image files to the database, and
let Chirps store the image file.
Design Concept of
Image (Figure) Attachment
l Table Name: figures
l Model name : figure
l Relationship : (memos : figures) => 1 to many
l One ’memo’ can have many images (figures)
l One picture belongs to only one memos
l Memos which do not have figures have no problem
without having any figures with it.
l Figures has ’memo_id’ field for relation
information.
the last
year design
Design Concept of Image Attachment
l Add field columns to Chirps table, which can
contain image storage/display information.
l Abandon the design of last year, which allows
the one (chirp/tweet) to many (images)
relationship by adding the new table of
attachment.
Photo display and metadata
To upload and display photo, add photo
method, and add metadata information to
the chirps_controller.rb
def photo
@chirp = Chirp.find( params[:id] )
send_data @chirp.photo, :filename => @chirp.file_name,
:type => @chirp.file_type
end
chirps_controller.rb
Modify create method
# POST /chirps
# POST /chirps.json
def create
if params[:chirp][:photo]
@file = params[:chirp][:photo]
@chirp = Chirp.new(
:user_id => current_user.id,
:chirp => params[:chirp][:chirp],
:photo => @file.read,
:file_name => @file.original_filename,
:file_type => @file.content_type
)
respond_to do |format|
if @chirp.save
format.html { redirect_to @chirp, notice: ‘Chirp was successfully created.’ }
format.json { render :show, status: :created, location: @chirp }
else
format.html { render :new }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
else
@chirp = Chirp.new(chirp_params)
@chirp.user_id = current_user.id
respond_to do |format|
if @chirp.save
format.html { redirect_to @chirp, notice: ‘Chirp was successfully created.’ }
format.json { render :show, status: :created, location: @chirp }
else
format.html { render :new }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
end
end
Original Part
chirps_controller.rb
Retrieve the file information such as file
name, file type, and the binary image of
the photo contents, from :photo
Confirm that :photo is in the params list in
the controller method.
chirps_controller # create (P1/2)
chirps_controller # create (P2/2)
To accept :photo in chirp
In order to accept image file to chirp/tweet,
we have changed _form.html.erb.
<%= f.file_field :photo %>
views/chirps/_form.html.erb
New Chirp input screen
Now next step is to show the image
Now image file is saved to the chirps table.
Next step is to show the photo. In order to
support the image display we are going
to;
(1) Modify show.html.erb file,
(2) Add photo display method, (done)
(3) Add photo method routings.
Views/chirps/show.html.erb
<%= notice %>
User:
<%= @chirp.user.email %>
Chirp:
<%= @chirp.chirp %>
Chirped at:
<%= @chirp.chirped_at %>
<% if @chirp.photo %>
Photo:
<% if @chirp.file_type =~ /^image¥/.*?(png|jpeg|gif|bmp)$/ %>
<%= image_tag url_for({:action => ‘photo’, :id => @chirp.id,
:filename => @chirp.file_name} ), :alt => @chirp.file_name %>
<% end %>
<% end %>
<%= link_to 'Edit', edit_chirp_path(@chirp) %> |
<%= link_to 'Back', chirps_path %>
views/chirps/show.html.erb
Add route for chirps#photo
Edit config/routes.rb
Before resources :chirps, add
get ‘chirps/photo’ => ‘chirps#photo’
Check routing specs
Type
rake routes
to know the current routing settings.
Check to see if chirp is added?
Add New Chirp
Now then modify the index screen
Replace
with the following in views/chirps/
index.html.erb
<% if chirp.file_type =~ /^image\/.*?(png|jpeg|gif)$/ %>
<%= image_tag url_for({:action => ‘photo’, :id=> chirp.id,
:filename => chirp.file_name}), :alt => chirp.file_name %>
<% end %>
<% end %>
views/chirps/index.html.erb
Now today’s goal screen is
Practice
Let your chirps system would have the
image file uploaded.
How to control the image size? Try!
chirps_controller # update method
# PATCH/PUT /chirps/1
# PATCH/PUT /chirps/1.json
def update
if params[:chirp][:photo]
@file = params[:chirp][:photo]
respond_to do |format|
if @chirp.update(
:chirp => params[:chirp][:chirp],
:photo => @file.read,
:file_name => @file.original_filename,
:file_type => @file.content_type
)
format.html { redirect_to @chirp, notice: ‘Chirp was successfully updated.’ }
format.json { render :show, status: :ok, location: @chirp }
else
format.html { render :edit }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
else
respond_to do |format|
if @chirp.update(chirp_params)
format.html { redirect_to @chirp, notice: ‘Chirp was successfully updated.’ }
format.json { render :show, status: :ok, location: @chirp }
else
format.html { render :edit }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
end
end
chirps_controller # update (1 / 2)
chirps_controller # update (2 / 2)