3USD tu primer mes de Premium ūüėĪ Canjear promo No me interesa

notifications Notificaciones

Marcar todas como leídas

Ver m√°s

lightbulb_outline

Subir archivos con AJAX y Ruby on Rails.

timer 3 Min.

remove_red_eye 3100

calendar_today 27/10/14

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 .
Genial, ahora sí, nuestro formulario para subir archivos quedaría así:
<%=form_tag("/emails/create",method: :post,remote: true) do%>
<%= file_field_tag "archivo"%>
<%end%>
Y listo... ¬Ņpara qu√© hacemos esperar al usuario viendo una p√°gina blanca mientras se carga su archivo cuando podemos hacerlo con AJAX? :)

Nota: Si tienes alguna duda respecto del tutorial o te gustaría recomendar alguno, no olvides dejar un comentario, aquí abajo.

Otros artículos del blog

Comunidad