Fazendo upload de imagens AJAX com paperclip e Jquery

Vou dar a minha primeira (pequena) contribuição com o forum que tem sido uma grande fonte de consulta para o meu aprendizado de Ruby e Rails. Fico aberto à sugestões dos Railers mais experientes que possam melhorar o código.

Como todo mundo sabe é impossível fazer o upload de imagens com Ajax, o XHR simplesmente não tem como ter acesso aos arquivos do computador do usuário. Ainda bem que existe o plugin form do Jquery que emula uma chamada ajax redirecionando a solicitação para um iframe criado dinamicamente.

A idéia é fazer o upload da imagem e mostrar a imagem “salva” na página sem o reload da mesma. Para isso além do JQuery e do plugin form ainda será necessário instalar o plugin paperclip.

Não vou entrar no mérito do paperclip, pois existem vários tutoriais por aí, além do mais acho que se pode obter o mesmo resultado com atachment_fu por exemplo.

O código vai funcionar assim, primeiro fazermos uma solicitação Create (Post) para inserir a foto no sistema de arquivos, depois fazemos uma solicitação Ajax Get (index) e obtemos a imagem e colocamos na página.

Como primeiro passo, deve-se colocar a referência ao jquery e ao plugin forms na view.
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.form','application' %>

No application.js vamos fazer o setup padrão de todas as chamadas ajax.
$.ajaxSetup({ beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/javascript");} });

E configuramos para que todos os formulários com id form-up façam o upload da imagem como descrito anteriormente.
$(function(){ $('#form-up').ajaxForm({type: 'post', iframe: true, success: function(){ var url = $('#form-up').attr('action'); $.ajax({ url: url, dataType: 'script', }); } }); });

Aquí vale uma ressalva, caso se utilize as bibliotecas padrões do Rails, deve-se usar a função $.noConflict() e ao invés de usar $ usar jQuery no código.

Note que caso a foto seja salva com sucesso, uma função fará a chamada ajax para obter a foto recem salva.

O controller ficaria assim.
def index<br /> @ambientes = Ambiente.all :order => ‘ID <span class='caps'>DESC</span>’<br /> @ambiente = session[:ambiente]<br /> respond_to do |format|<br /> format.html # index.html.erb<br /> format.js<br /> end<br /> end</p> def create @ambiente = Ambiente.create(params[:ambiente]) session[:ambiente]=@ambiente respond_to do |format| format.html {redirect_to :action => ’index’} end end <p>

Em create, a imagem é salva e a variável é guardada em uma sessão, em index, onde a imagem será obtida pela chamada Ajax, a variável @ambiente guarda a imagem recem salva na sessão que será trasmitida para o “script” index.js.erb conforme abaixo:
$('.foto-ambiente:first').before('<div class='foto-ambiente'><%= image_tag @ambiente.photo.url(:thumb) %></div>');

Talvês se estranhe um pouco a construção @ambiente.photo.url(:thumb), mas essa é a forma de usar o plugin paperclip.

Bem, espero que esse mini-tutorial possa ser útil. O que posso dizer é que enfrentei o mesmo desafio com Asp.Net e afirmo que com Rails foi muito mais fácil de resolver.

Parabéns,

Tem como utilizar uma barra progress para exibir ao usuário que está enviando a foto ou um arquivo? Eu sei que o “JQuery UI” tem uma função em progress, derrepente dá para usar.

[]`s

Pestana

Acredito que seja possível. Acho que tem duas maneiras de fazer isso, uma fácil e não tão completa e uma complicada mas com informações fiéis.

Na fácil, usariamos a propriedade beforeSubmit do ajaxForm para exibir uma barra de progresso animada, a barra poderia ser removida na propriedade success. A barra indicaria somente que o upload está sendo feito, mas não indicaria quanto do upload já foi feito.

Na maneira complicada, precisariamos obter alguma informação do servidor dizendo quanto do arquivo foi salvo. Dei uma pesquisada e achei este plugin que talvêz possa ajudar.

Abs,

Só completando a informação, também poderia usar aprogressbar do Jquery, somente teria que arrumar uma maneira de atualizar o progresso da mesma.

Muito bom. Valeu a dica.

[]’s