Primeiros passos com o Active Storage

A grande aposta do Rails 5.2 para fazer upload de arquivos

Photo by picjumbo.com from Pexels

O Active Storage é um recurso da versão 5.2 do Rails que facilita o upload e tratamento de arquivos para aplicações construidas com o framework. Até esta versão, usávamos gems como o Paperclip e o CarrierWave, entre outras, para contar com esses recursos.

Se você quiser saber mais sobre o assunto, veja a documentação oficial em http://edgeguides.rubyonrails.org/active_storage_overview.html.

Para mostrar o funcionamento do Active Storage na prática, vamos criar um álbum de fotografias. Neste exemplo, cada álbum pertencerá a um usuário e cada usuário poderá ter diversos álbuns de fotos. Ao final teremos explorado a integração do Active Storage com models, formulários e controllers, possibilitando o upload de arquivos e a exibição de imagens em views.

Para dar início à aplicação:

rails new myalbum -d postgresqlcd myalbum

Nessa simulação, cada usuário terá um nome e uma foto de perfil. Aqui no Campus Code nunca usamos scaffold mas vou abrir uma exceção para agilizar o tutorial :)

rails generate scaffold user name:string

Não vamos criar o campo de foto agora. Em breve, o Rails vai fazer a “mágica”. Então podemos executar as migrações necessárias:

rails db:create db:migrate

Agora podemos subir a aplicação e conferir o código gerado pelo Rails em ação. Para inicializar:

rails server

E agora podemos acessar no navegador:

http://localhost:3000/users
Tela de criação do usuário com 4 linhas de comando

Ao clicar em New User, só teremos a opção de incluir Name. Está faltando a foto do perfil e essa é a deixa para começarmos com o Active Storage.

Para criar as tabelas necessárias do Active Storage vamos rodar os seguintes comandos:

rails active_storage:installrails db:migrate

Se acessarmos o db/schema.db, vamos notar que existem duas novas tabelas criadas pelo Active Storage: active_storage_attachments, que referencia as imagem para as nossas tabelas, e active_storage_blobs, que é a configuração das imagens.

O próximo passo é abrir o model User em app/model/user.rb e adicionar has_one_attached:avatar.

Foi usada a palavra “avatar”, mas você pode colocar qualquer palavra neste campo.

Pronto! Nosso User já possui um campo para imagem.
Agora, para podermos fazer o upload da imagem do avatar, vamos acrescentar esse novo campo no form que está na view app/views/users/_form.html.erb.

Agora precisamos adicionar o campo Avatar no UserController em app/controllers/user_controller.rb, permitindo que nossa action create receba o parâmetro avatar submetido pelo formulário.

No método user_params, acrescentamos o parâmetro avatar como exibido na imagem abaixo. Para entender melhor esse tratamento de parâmetros, sugiro uma lida na documentação sobre Strong Parameters ;)

Pronto! Com isso, já podemos inserir um avatar para nosso User.

Agora, precisamos exibir nosso User criado junto com seu avatar na view app/views/users/show.html.erb.

Feito isso, já é possível subir e visualizar a foto do avatar:

Estamos quase lá! Agora vamos criar um álbum para nosso User gerando um scaffold Album. Ele terá um título e imagens. Mais uma vez, não precisamos criar o campo de imagem agora.

rails generate scaffold album title user:referencesrails db:migrate

Vamos abrir o model Album em app/modes/album.rb. Diferente do User, o Album terá várias imagens, então, ao invés de has_one_attached, usaremos has_many_attached e vamos chamar esse relacionamento de images

E fazer a mesma modificação realizadas no User: inserir o campo no form da view app/views/albums/_form.html.erb.
Como será possível inserir várias imagens de uma vez, nosso campo de upload terá o atributo multiple: true.

No controller AlbumsController em app/controllers/albums_controller.erb vamos inserir o campo de imagem para permitir que o parâmetro seja recebido pela view.

No método album_params colocamos params.require(:album).permit(:title, :user_id, images[]).

Foi usado images[], pois, ao invés de uma única imagem, agora teremos um array de imagens.

Se você quiser saber mais sobre array, veja a documentação oficial em https://ruby-doc.org/core-2.4.1/Array.html.

Agora só precisamos inserir a exibição das imagens do álbum no form da view app/views/albums/show.html.erb.

Ao acessar http://localhost:3000/albums temos a possibilidade de abrir um álbum feito anteriormente ou criar um novo álbum, além de fazer upload de diversas imagens ao mesmo tempo:

E está feito!

Diferente das gems citadas no início deste texto, o Active Storage requer que as validações sejam feitas manualmente. Quer saber como? Veja a documentação no Active Record Validations

Quer ver o código completo? Acesse no meu GitHub: João Henrique -Myalbum


Se você tem alguma pergunta ou quiser compartilhar alguma coisa, comenta aqui!

Campus Code Blog

Treinamentos super intensivos que transformam você em um verdadeiro programador web. Mais em campuscode.com.br

João Henrique do Vale

Written by

Formado em Análise e Desenvolvimento de Sistemas pela Universidade Cidade de São Paulo e atua como desenvolvedor no Campus Code

Campus Code Blog

Treinamentos super intensivos que transformam você em um verdadeiro programador web. Mais em campuscode.com.br

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade