Subir archivos con AJAX y Ruby on Rails.

AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web que nos permite comunicar el frontend de nuestra aplicación web con el backend, sin la necesidad de recargar la página. Es genial porque de esta manera podemos procesar peticiones mientras el usuario sigue navegando por el sitio web. AJAX es una tecnología muy interesante de la que puedes aprender aquí: http://beta.codigofacilito.com/videos/tutorial_jquery_29_ajax

Ejecutar AJAX en tu aplicación web requiere que tengas conocimientos de javaScript para generar la petición, a menos que estés usando Ruby on Rails, en ese caso es mucho más fácil.

Antes de continuar, quiero mencionar que vas a necesitar entender algunas cosas de Ruby on Rails para continuar el tutorial, así que, si eres nuevo en Rails, te recomiendo darte una vuelta por el curso de Rails 3 aquí en la página: http://beta.codigofacilito.com/cursos/Rails

En Ruby on Rails, tenemos los form helpers, que son métodos que generan controles en los formularios, por ejemplo, podemos crear un formulario con el helper form_tag, una de las ventajas de utilizar estos helpers en lugar de escribir los controles en HTML, es que puedes pasar algunas opciones que extenderán la función del control, por ejemplo, imaginen que queremos guardar el email de un usuario en nuestra aplicación Ruby on Rails, utilizaríamos un formulario como el siguiente:

<%=form_tag("/emails/create",method: :post) do%>
  <%= email_field_tag "email", nil, placeholder: "Deja tu mail aquí"%>
<%end%>

El código habla por sí solo, tendremos un formulario, con un control para ingresar un correo electrónico (Rails tiene form helpers para controles HTML5). Entre otras cosas sabes que se enviarán los datos a la URL "/emails/create" utilizando POST como método de envío. Si revisamos las rutas de esta aplicación ejemplo, deberíamos tener algo así:

post '/emails/create' 

Además de un controlador (EmailsController) que contendría algo como esto:

class EmailsController < ApplicationController
  def create
  	#params[:email] contiene el correo que el usuario envió
  end
end

Genial, ahora podemos hacer en el servidor lo que queramos con la información que se envió en el formulario. El ejemplo funciona, pero claramente no usa AJAX, ¿sería genial si integráramos AJAX, no? Bien, hagámoslo, para ello vamos a necesitar un poco de javaScript... esperen, no, no necesitaremos javaScript, sólo necesitamos modificar nuestro formulario, para que quede así:

<%=form_tag("/emails/create", remote: true,method: :post) do%>
  <%= email_field_tag "email", nil, placeholder: "Deja tu mail aquí"%>
<%end%>

¿Ves esas palabras en negritas? Están convirtiendo el formulario en uno remoto, lo que significa que los datos se enviarán utilizando AJAX, así de simple, así de sencillo, así de práctico.

Rails puede hacer eso porque contiene algunas líneas de javaScript que nos permiten hacer cosas cool como esas (entre otras muchas), el problema hasta ahora es que, si agregamos un control para subir archivos, el formulario dejará de ser remoto, y los datos volverán a enviarse de la manera tradicional :(

Afortunadamente la comunidad de Rails reparte amor a los programadores a través de las gemas, de las que en este caso extraeremos Remotipart (https://github.com/JangoSteve/remotipart), ¿qué hace remotipart? Permite que los formularios con controles de archivos sean remotos, y para que funcione, claro, primero tenemos que instalarla, así que abramos el Gemfile y agreguemos la gema:

gem 'remotipart', '~> 1.2'

Instalemos la gema, ingresando desde la terminal:

bundle install

Y listo, tenemos remotipart instalado... un último paso y estamos listos, abrimos el archivo application.js que encontramos en app/assets/javascripts y colocamos la siguiente línea:

//= require jquery.remotipart

Tienes que hacer esto al inicio, a modo que tu archivo application.js quedará de la siguiente manera:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.remotipart
//= require_tree .