Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TDC 2014 - Solucionando o problema de Uploads e...
Search
Rafael Macedo
August 07, 2014
Programming
1
160
TDC 2014 - Solucionando o problema de Uploads em Apps no Heroku
Rafael Macedo
August 07, 2014
Tweet
Share
More Decks by Rafael Macedo
See All by Rafael Macedo
Modularização de código JS
macedorafael
0
220
GuruSP - Solucionando o problema de Uploads em Apps no Heroku
macedorafael
2
100
Aplicações Realtime com XMPP
macedorafael
3
200
Web in the cloud with ruby
macedorafael
2
380
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
17k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Featured
See All Featured
A better future with KSS
kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Done Done
chrislema
184
16k
Designing for humans not robots
tammielis
253
25k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Unsuck your backbone
ammeep
671
58k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
Solucionando o problema de Uploads em Apps no Heroku
@macedorafael http://github.com/macedo Rafael Macedo
@macedorafael http://github.com/macedo Macedo
None
None
“O que pode dar errado num mero upload de uma
foto?”
None
None
heroku create
heroku create git push heroku
None
None
30 segundos
! ! ! ! “comum” Web Browser
! ! ! ! “comum” Web Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
None
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
None
Processamento background
Processamento background Direct Upload to S3
heroku addons
None
None
None
http://cloudinary.com/
upload
•JPG, PNG, GIF, BMP, ICO, TIFF and PDF •API simples
de upload •Upload pelo servidor ou diretamento pelo browser
storage
•Storage redundante e com alta disponibilidade •Backups automáticos
delivery
•CDN •Caching
Manipulação e Processamento
resize filter crop rotate face detection effects
resize filter crop rotate face detection effects …
Gerenciamento
None
None
None
“A little less conversation a little more ACTION
/tmp/carlos-mexicano.jpg
gem 'cloudinary'
# config/cloudinary.yml development: cloud_name: 'dwqsgdejq' api_key: '91230987435979324' api_secret: '**********************'
Cloudinary::Uploader.upload( '/tmp/carlos-mexicano.jpg' )
{ "public_id"=>"babtchij80xduih97me0", "version"=>1407375612, "signature"=>"00b0721d1af7fd0c69eb3bc112e89022406bd027", "width"=>3096, "height"=>4128, "format"=>"jpg", "resource_type"=>"image", "created_at"=>"2014-08-07T01:40:12Z", "bytes"=>4280618,
"type"=>"upload", "etag"=>"97358d56df90e5ea49e64d76c1108533", "url"=>"http://res.cloudinary.com/dwqsgdejq/image/ upload/v1407375612/babtchij80xduih97me0.jpg", "secure_url"=>"https://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/babtchij80xduih97me0.jpg" } Cloudinary::Uploader.upload( '/tmp/carlos-mexicano.jpg' )
\o/
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
None
w_160,h_160,c_thumb, g_face
w_160,h_160,c_thumb, g_face Processa mento
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload h_160,w_160,c_thumb, e_blur_faces,g_face
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload h_160,w_160,c_thumb, e_blur_faces,g_face
http://cloudinary.com/documentation/ image_transformations
None
None
gem 'attachinary'
# config/application.rb require File.expand_path('../boot', __FILE__) require ‘rails/all' #active_record or
mongoid require ‘attachinary/orm/active_record' …
# config/application.rb require File.expand_path('../boot', __FILE__) require ‘rails/all' #active_record or
mongoid require ‘attachinary/orm/active_record' …
$ rake attachinary:install:migrations $ rake db:migrate
# config/routes.rb Rails.application.routes.draw do devise_for :users resources :users, only: [:update]
root to: 'album#show' mount Attachinary::Engine => '/attachinary' end
# config/routes.rb Rails.application.routes.draw do devise_for :users resources :users, only: [:update]
root to: 'album#show' mount Attachinary::Engine => '/attachinary' end
# app/models/user.rb class User < ActiveRecord::Base ... has_attachment :avatar,
accept: [:gif, :jpg, :png] has_attachments :photos, maximum: 10 end
<%= simple_form_for @user do |f| %> <%= f.attachinary_file_field :avatar %>
<%= f.attachinary_file_field :photos %> <%= f.submit %> <% end %> # app/views/users/_form.html.erb
/* app/assets/javascript/application.js */ //= require jquery //= require cloudinary //=
require attachinary //= require_self $(function() { $('.attachinary-input').attachinary(); });
<%= cloudinary_js_config %> # app/views/layouts/application.html.erb
None
<%= cl_image_tag(@photo.path, width: 160, height: 160) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %> <%= cl_image_tag(@photo.path, width: 160, height: 160, crop: :thumb, gravity: :face) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %> <%= cl_image_tag(@photo.path, width: 160, height: 160, crop: :thumb, gravity: :face) %>
None
None
None
$$$
None
10 GB Storage
10 GB Storage 40 GB Bandwidth
Cloudinary
$35
S3
$7
None
???
None
None
$7
$42
Conclusão
“O que pode dar errado num mero upload de uma
foto?”
Muita coisa!
None
Processamento background
Processamento background Direct Upload
http://fileupload-tdc2014- example.herokuapp.com/
https://github.com/macedo/ cloudinary_image_uploader_example
http://www.akitaonrails.com/2014/03/26/ heroku-tips-s3-direct-upload-carrierwave- sidekiq
None
OBRIGADO
OBRIGADO ?