Easy uploads for Rails application
This is still an early beta version and will change a lot until it reaches API stability. That said, it's already being used on production projects.
Make sure you have ImageMagick installed.
Add to Gemfile
gem 'uploadbox', '0.1.3'
Run generators
rails g uploadbox:image
Migrate database
rake db:migrate
Add jquery and uploadbox to application.js
//= require jquery
//= require jquery_ujs
//= require uploadbox
Add uploadbox to application.css
/*
*= require uploadbox
*/
Create a development bucket on Amazon S3
Edit CORS config for the bucket
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://localhost:3000</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Get S3 Key an Secret from Amazon S3 Credentials and update your .env file
Add uploads_one to your model
class Post < ActiveRecord::Base
uploads_one :picture, thumb: [100, 100], regular: [600, 300], placeholder: 'default.png'
end
If placeholder is set posts without uploads will render the placeholder.
Empty @post.picture.thumb will render app/assets/images/thumb_default.png
Add field to form
<%= f.uploads_one :picture %>
Allow picture attribute on controller
def post_params
params.require(:post).permit(:title, :body, :picture)
end
Show image
<%= img @post.picture.regular if @post.picture? %>
You might come to a situation where you want to retroactively change a version or add a new one. You can use the update_#{upload_name}_versions! method to recreate the versions from the base file.
For a post with a picture:
Post.update_picture_versions!
Create a production bucket on S3 Don't use your development bucket
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://yourdomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Set environmet variables
heroku config:add
HEROKU_API_KEY=ab12acvc12 \
HEROKU_APP=your-app-name \
S3_KEY=AAAA123BBBB \
S3_SECRET=abc123ABcEffgee122 \
S3_BUCKET=uploads-production \
Add Redis
heroku addons:add rediscloud:20
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent