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
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
It's Worth the Effort
3n
185
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Thoughts on Productivity
jonyablonski
69
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Facilitating Awesome Meetings
lara
54
6.4k
Bash Introduction
62gerente
613
210k
Documentation Writing (for coders)
carmenintech
72
4.9k
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 ?