Building the photo controller and view

We want RESTful URLs for our photo resource. Here is the routes.rb file.

PhotoGallery::Application.routes.draw do
  resources :photos
end

It is time to create the contorller.

$ rails generate controller photos

The controller

 class PhotosController < ApplicationController
   def new
     @photo = Photo.new
   end
 
   def create
     @photo = Photo.new params[:photo]
     if @photo.save
       redirect_to @photo
    else
      render :new
    end
  end
end

views/photos/new.html.erb

 <%- form_for @photo, html: { :multipart => true } do |f| %>
   <p>
     <%= f.label :title %> <br>
     <%= f.text_field :title %>
   </p>
 
   <p>
     <%= f.label :file %> <br>
     <%= f.file_field :file %>
  </p>

  <p>
    <%= f.submit 'Upload Photo' %>
  </p>
<%- end %>

Let’s try the function in browser with the following steps.

1. In terminal, in the current project, run rails server.
2. Open http://0.0.0.0:3000/photos/new in web browser.
3. Select an image file and put in the title.
4. Click the ‘Upload Photo’ button.
5. Now we should see an error of NoMethodError.
6. If we check the URL, it is redirected to the photo showing URL with the newly created photo ID.
7. This is normal because we haven’t implemented the show method in controller yet.

Then we add the show feature

The photos_controller.rb

def show
  @photo = Photo.find params[:id]
end

And its related view: views/photos/show.html.erb

<%= image_tag @photo.file.url(:medium) %> <br>
<%= @photo.title %>

Since the edit form shares the same code from the create form, we will extract the form into a common file.

Move the entire form_for block to a new file: views/photos/_form.html.erb

Now the views/photos/new.html.erb becomes

<h1>Creating New Photo </h1>
<%= render 'form' %>

And the views/photos/edit.html.erb file

<h1>Edit Photo </h1>
Existing image: <br>
<%= image_tag @photo.file.url(:medium) %>

<%= render 'form' %>

Optionally we may want to let site admin edit the photo from the user interface, we can do that by adding a link to the edit path in the views/photos/show.html.erb file.

<%= link_to 'Edit', edit_photo_path(@photo) %>

And the edit and update controller method in the photos_controller.rb file.

 def edit
   @photo = Photo.find params[:id]
 end
 
 def update
   @photo = Photo.find params[:id]
 
   if @photo.update_attributes params[:photo]
     redirect_to @photo
  else
    render :edit
  end
end

Let’s try the function in browser and we should be able to create and edit photos. Here is a screenshot of the editing screen:

What’s next? We’re going to take a look at “Using partial file”.