quinta-feira, 16 de outubro de 2008

Upload simples com File Column

O post de hoje vai falar de um plugin que resolve um problema
relativamente simples, porém muito comum, o que faz do
FileColumn uma ferramenta extremamente útil.

Como sempre, vamos iniciar nosso projeto. No nosso exemplo, teremos
um modelo chamado 'Car', e ao cadastrar um carro pelo sistema,
também teremos a opção de incluir uma foto.

rails carstore
cd carstore
rake db:create:all

Ok, já temos nosso projeto. Vamos entao criar um scaffold simples para
gerenciamento dos carros que iremos 'vender'.

script/generate scaffold car brand:string model:string year:integer

Uma vez criado o scaffold, precisamos de uma migration adicional para
adicionar no banco de dados o campo que vai conter o nome do aquivo
de foto que vai ser incluída no anuncio do carro.

script/generate migration add_picture_to_cars

Edite o arquivo do migrations para adicionar o campo tipo string:

class AddPictureToCars < ActiveRecord::Migration
def self.up
add_column :cars, :picture, :string
end

def self.down
remove_column :cars, :picture
end
end

E, para nao esquecer, vamos rodar os migrations para garantir que
a tabela seja criada no banco de dados.

rake db:migrate

Muito bem. Nosso ambiente esta pronto para instalarmos o plugin.

script/plugin install http://opensvn.csie.org/rails_file_column/plugins/file_column/trunk

Uma vez que temos o plugin instalado, devemos informar na classe model 'Car' que
temos um campo que se trata na verdade de um upload de arquivo.

app/model/car.rb

class Car < ActiveRecord::Base

file_column :picture

end

Isso ja basta na nossa classe model. Agora precisamos trabalhar com nossos templates
para criar o campo de upload e visualização da imagem:

Formulário para novo anúncio:

app/views/cars/new.html.erb

<h1>New car</h1>

<% form_for(@car, :html => { :multipart => true }) do |f| %>
<%= f.error_messages %>

<p>
<%= f.label :brand %><br />
<%= f.text_field :brand %>
</p>
<p>
<%= f.label :model %><br />
<%= f.text_field :model %>
</p>
<p>i
<%= f.label :year %><br />
<%= f.text_field :year %>
</p>
<p>
<%= f.label :picture %><br/>
<%= file_column_field 'car', 'picture' %>
</p>
<p>
<%= f.submit "Create" %>
</p>
<% end %>

<%= link_to 'Back', cars_path %>

Uma coisa muito importante que deve ser observada neste codigo é
a parte que torna o formulário um form do tipo multipart, caso
contrário o upload nã irá funcionar.

Formulario para editar anuncio:

app/views/cars/edit.html.erb

<h1>Editing car</h1>

<% form_for(@car, :html => { :multipart => true }) do |f| %>
<%= f.error_messages %>

<p>
<%= f.label :brand %><br />
<%= f.text_field :brand %>
</p>
<p>
<%= f.label :model %><br />
<%= f.text_field :model %>
</p>
<p>
<%= f.label :year %><br />
<%= f.text_field :year %>
</p>
<p>
<%= f.label :picture %><br/>
<% unless @car.picture.blank? %>
<%= image_tag url_for_file_column('car', 'picture') %>
<br/>
<% end %>
<%= file_column_field 'car', 'picture' %>
<p>
<%= f.submit "Update" %>
</p>
<% end %>

<%= link_to 'Show', @car %> |
<%= link_to 'Back', cars_path %>

Uma coisa importante a notar neste segundo formulario é que
quando já existe uma foto no sistema o usuá pode visualizá-la.

E, por fim, vamos editar a página de visualização do anúncio:

app/views/cars/show.html.erb

<p>
<b>Brand:</b>
<%=h @car.brand %>
</p>

<p>
<b>Model:</b>
<%=h @car.model %>
</p>

<p>
<b>Picture:</b><br/>
<%= image_tag url_for_file_column(:car, :picture) %>
</p>

<p>
<b>Year:</b>
<%=h @car.year %>
</p>


<%= link_to 'Edit', edit_car_path(@car) %> |
<%= link_to 'Back', cars_path %>

Depois é só subir o server e curtir!

Nenhum comentário: