├── log └── .keep ├── app ├── mailers │ └── .keep ├── models │ ├── .keep │ ├── concerns │ │ └── .keep │ ├── country.rb │ ├── tweet.rb │ └── user.rb ├── assets │ ├── images │ │ ├── .keep │ │ ├── corgi.jpg │ │ └── ulysses.jpg │ ├── stylesheets │ │ ├── api │ │ │ └── tweets.scss │ │ ├── static_pages.scss │ │ └── application.css │ └── javascripts │ │ └── application.js ├── controllers │ ├── concerns │ │ └── .keep │ ├── static_pages_controller.rb │ ├── application_controller.rb │ ├── api │ │ └── tweets_controller.rb │ └── tweets_controller.rb ├── views │ ├── static_pages │ │ └── root.html │ ├── api │ │ └── tweets │ │ │ ├── show.json.jbuilder │ │ │ ├── index.json.jbuilder │ │ │ └── _tweet.json.jbuilder │ ├── tweets │ │ ├── edit.html.erb │ │ ├── new.html.erb │ │ ├── index.html.erb │ │ ├── show.html.erb │ │ └── _form.html.erb │ └── layouts │ │ └── application.html.erb ├── helpers │ ├── api │ │ └── tweets_helper.rb │ ├── application_helper.rb │ └── static_pages_helper.rb └── .DS_Store ├── lib ├── assets │ └── .keep └── tasks │ └── .keep ├── public ├── favicon.ico ├── robots.txt ├── 500.html ├── 422.html └── 404.html ├── test ├── helpers │ └── .keep ├── mailers │ └── .keep ├── models │ └── .keep ├── controllers │ ├── .keep │ ├── api │ │ └── tweets_controller_test.rb │ └── static_pages_controller_test.rb ├── fixtures │ └── .keep ├── integration │ └── .keep └── test_helper.rb ├── notes ├── outline.rb ├── aws_keys.yml ├── paperclip_config.rb └── aws_policy.js ├── vendor └── assets │ ├── javascripts │ └── .keep │ └── stylesheets │ └── .keep ├── .byebug_history ├── frontend ├── dispatcher.js ├── constants │ └── TweetConstants.js ├── actions │ └── TweetActions.js ├── utils │ └── TweetApi.js ├── stores │ └── TweetStore.js ├── twitter.jsx └── components │ ├── TweetIndex.jsx │ └── TweetForm.jsx ├── bin ├── bundle ├── rake ├── rails ├── spring └── setup ├── config ├── boot.rb ├── initializers │ ├── cookies_serializer.rb │ ├── session_store.rb │ ├── mime_types.rb │ ├── filter_parameter_logging.rb │ ├── backtrace_silencers.rb │ ├── assets.rb │ ├── wrap_parameters.rb │ └── inflections.rb ├── environment.rb ├── routes.rb ├── locales │ └── en.yml ├── secrets.yml ├── application.rb ├── environments │ ├── development.rb │ ├── test.rb │ └── production.rb └── database.yml ├── config.ru ├── db ├── migrate │ ├── 20160428130623_add_index_to_author_id.rb │ ├── 20160428130610_add_author_id_to_tweets.rb │ ├── 20160428130442_create_tweets.rb │ ├── 20160428130554_create_users.rb │ ├── 20160602145916_add_attachment_image_to_tweets.rb │ └── 20160428130822_create_countries.rb ├── seeds.rb └── schema.rb ├── Rakefile ├── package.json ├── .gitignore ├── Gemfile ├── webpack.config.js ├── Gemfile.lock └── README.md /log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/tasks/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/helpers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/assets/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/controllers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/fixtures/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/integration/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /notes/outline.rb: -------------------------------------------------------------------------------- 1 | # paperclip 2 | -------------------------------------------------------------------------------- /vendor/assets/javascripts/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.byebug_history: -------------------------------------------------------------------------------- 1 | c 2 | params 3 | c 4 | params 5 | -------------------------------------------------------------------------------- /app/views/static_pages/root.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /app/helpers/api/tweets_helper.rb: -------------------------------------------------------------------------------- 1 | module Api::TweetsHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/helpers/static_pages_helper.rb: -------------------------------------------------------------------------------- 1 | module StaticPagesHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/views/api/tweets/show.json.jbuilder: -------------------------------------------------------------------------------- 1 | json.partial! "tweet", tweet: @tweet 2 | -------------------------------------------------------------------------------- /app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsladkey/file-upload-demo/HEAD/app/.DS_Store -------------------------------------------------------------------------------- /frontend/dispatcher.js: -------------------------------------------------------------------------------- 1 | var Dispatcher = require('flux').Dispatcher; 2 | module.exports = new Dispatcher(); 3 | -------------------------------------------------------------------------------- /app/assets/images/corgi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsladkey/file-upload-demo/HEAD/app/assets/images/corgi.jpg -------------------------------------------------------------------------------- /app/assets/images/ulysses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsladkey/file-upload-demo/HEAD/app/assets/images/ulysses.jpg -------------------------------------------------------------------------------- /app/views/api/tweets/index.json.jbuilder: -------------------------------------------------------------------------------- 1 | json.array! @tweets do |tweet| 2 | json.partial! "tweet", tweet: tweet 3 | end 4 | -------------------------------------------------------------------------------- /app/controllers/static_pages_controller.rb: -------------------------------------------------------------------------------- 1 | class StaticPagesController < ApplicationController 2 | def root 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /bin/bundle: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) 3 | load Gem.bin_path('bundler', 'bundle') 4 | -------------------------------------------------------------------------------- /app/views/tweets/edit.html.erb: -------------------------------------------------------------------------------- 1 |

Edit your tweet!

2 | <%= render "form", tweet: @tweet %> 3 | 4 | Back to Tweets 5 | -------------------------------------------------------------------------------- /app/views/tweets/new.html.erb: -------------------------------------------------------------------------------- 1 |

Make a new tweet!

2 | <%= render "form", tweet: @tweet %> 3 | 4 | Back to Tweets 5 | -------------------------------------------------------------------------------- /config/boot.rb: -------------------------------------------------------------------------------- 1 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) 2 | 3 | require 'bundler/setup' # Set up gems listed in the Gemfile. 4 | -------------------------------------------------------------------------------- /app/views/api/tweets/_tweet.json.jbuilder: -------------------------------------------------------------------------------- 1 | json.body tweet.body 2 | json.id tweet.id 3 | json.author_name tweet.author.name 4 | json.image_url asset_path(tweet.image.url) 5 | -------------------------------------------------------------------------------- /config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require ::File.expand_path('../config/environment', __FILE__) 4 | run Rails.application 5 | -------------------------------------------------------------------------------- /config/initializers/cookies_serializer.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | Rails.application.config.action_dispatch.cookies_serializer = :json 4 | -------------------------------------------------------------------------------- /db/migrate/20160428130623_add_index_to_author_id.rb: -------------------------------------------------------------------------------- 1 | class AddIndexToAuthorId < ActiveRecord::Migration 2 | def change 3 | add_index :tweets, :author_id 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /config/initializers/session_store.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | Rails.application.config.session_store :cookie_store, key: '_twitter_session' 4 | -------------------------------------------------------------------------------- /frontend/constants/TweetConstants.js: -------------------------------------------------------------------------------- 1 | TweetConstants = { 2 | RECEIVE_ALL: "RECEIVE_ALL_TWEETS", 3 | RECEIVE_NEW: "RECEIVE_NEW_TWEET" 4 | }; 5 | 6 | module.exports = TweetConstants; 7 | -------------------------------------------------------------------------------- /config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the Rails application. 2 | require File.expand_path('../application', __FILE__) 3 | 4 | # Initialize the Rails application. 5 | Rails.application.initialize! 6 | -------------------------------------------------------------------------------- /config/initializers/mime_types.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new mime types for use in respond_to blocks: 4 | # Mime::Type.register "text/richtext", :rtf 5 | -------------------------------------------------------------------------------- /db/migrate/20160428130610_add_author_id_to_tweets.rb: -------------------------------------------------------------------------------- 1 | class AddAuthorIdToTweets < ActiveRecord::Migration 2 | def change 3 | add_column :tweets, :author_id, :integer, null: false 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /test/controllers/api/tweets_controller_test.rb: -------------------------------------------------------------------------------- 1 | require 'test_helper' 2 | 3 | class Api::TweetsControllerTest < ActionController::TestCase 4 | # test "the truth" do 5 | # assert true 6 | # end 7 | end 8 | -------------------------------------------------------------------------------- /test/controllers/static_pages_controller_test.rb: -------------------------------------------------------------------------------- 1 | require 'test_helper' 2 | 3 | class StaticPagesControllerTest < ActionController::TestCase 4 | # test "the truth" do 5 | # assert true 6 | # end 7 | end 8 | -------------------------------------------------------------------------------- /app/assets/stylesheets/api/tweets.scss: -------------------------------------------------------------------------------- 1 | // Place all the styles related to the Api::Tweets controller here. 2 | // They will automatically be included in application.css. 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ 4 | -------------------------------------------------------------------------------- /notes/aws_keys.yml: -------------------------------------------------------------------------------- 1 | development: 2 | s3_bucket: "BUCKET-NAME-DEV" 3 | 4 | production: 5 | s3_bucket: "BUCKET-NAME-PRO" 6 | 7 | s3_region: "us-east-1" 8 | s3_access_key_id: "XXXX" 9 | s3_secret_access_key: "XXXX" 10 | -------------------------------------------------------------------------------- /app/assets/stylesheets/static_pages.scss: -------------------------------------------------------------------------------- 1 | // Place all the styles related to the StaticPages controller here. 2 | // They will automatically be included in application.css. 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | # 3 | # To ban all spiders from the entire site uncomment the next two lines: 4 | # User-agent: * 5 | # Disallow: / 6 | -------------------------------------------------------------------------------- /db/migrate/20160428130442_create_tweets.rb: -------------------------------------------------------------------------------- 1 | class CreateTweets < ActiveRecord::Migration 2 | def change 3 | create_table :tweets do |t| 4 | t.string :body, null: false 5 | 6 | t.timestamps 7 | end 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /config/initializers/filter_parameter_logging.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Configure sensitive parameters which will be filtered from the log file. 4 | Rails.application.config.filter_parameters += [:password] 5 | -------------------------------------------------------------------------------- /config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | root to: 'static_pages#root' 3 | resources :tweets 4 | 5 | namespace :api, defaults: {format: :json} do 6 | resources :tweets, only: [:index, :create, :show] 7 | end 8 | 9 | end 10 | -------------------------------------------------------------------------------- /app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | # Prevent CSRF attacks by raising an exception. 3 | # For APIs, you may want to use :null_session instead. 4 | # protect_from_forgery with: :exception 5 | end 6 | -------------------------------------------------------------------------------- /bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | begin 3 | load File.expand_path('../spring', __FILE__) 4 | rescue LoadError => e 5 | raise unless e.message.include?('spring') 6 | end 7 | require_relative '../config/boot' 8 | require 'rake' 9 | Rake.application.run 10 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require File.expand_path('../config/application', __FILE__) 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /db/migrate/20160428130554_create_users.rb: -------------------------------------------------------------------------------- 1 | class CreateUsers < ActiveRecord::Migration 2 | def change 3 | create_table :users do |t| 4 | t.string :name, null: false 5 | t.string :email, null: false 6 | 7 | t.timestamps 8 | end 9 | end 10 | end 11 | -------------------------------------------------------------------------------- /bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | begin 3 | load File.expand_path('../spring', __FILE__) 4 | rescue LoadError => e 5 | raise unless e.message.include?('spring') 6 | end 7 | APP_PATH = File.expand_path('../../config/application', __FILE__) 8 | require_relative '../config/boot' 9 | require 'rails/commands' 10 | -------------------------------------------------------------------------------- /notes/paperclip_config.rb: -------------------------------------------------------------------------------- 1 | config.paperclip_defaults = { 2 | :storage => :s3, 3 | :s3_credentials => { 4 | :bucket => ENV["s3_bucket"], 5 | :access_key_id => ENV["s3_access_key_id"], 6 | :secret_access_key => ENV["s3_secret_access_key"], 7 | :s3_region => ENV["s3_region"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /db/migrate/20160602145916_add_attachment_image_to_tweets.rb: -------------------------------------------------------------------------------- 1 | class AddAttachmentImageToTweets < ActiveRecord::Migration 2 | def self.up 3 | change_table :tweets do |t| 4 | t.attachment :image 5 | end 6 | end 7 | 8 | def self.down 9 | remove_attachment :tweets, :image 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /app/views/layouts/application.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Twitter 5 | <%= stylesheet_link_tag 'application', media: 'all' %> 6 | <%= javascript_include_tag 'application'%> 7 | <%= csrf_meta_tags %> 8 | 9 | 10 | 11 | 12 | <%= yield %> 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /app/views/tweets/index.html.erb: -------------------------------------------------------------------------------- 1 | 2 | > 3 | All the tweets 4 | > 5 | New Tweet 6 | 7 | 8 | 17 | -------------------------------------------------------------------------------- /db/migrate/20160428130822_create_countries.rb: -------------------------------------------------------------------------------- 1 | class CreateCountries < ActiveRecord::Migration 2 | def change 3 | create_table :countries do |t| 4 | t.string :name, null: false 5 | 6 | t.timestamps 7 | end 8 | 9 | add_column :users, :country_id, :integer, null: false 10 | add_index :users, :country_id 11 | end 12 | end 13 | -------------------------------------------------------------------------------- /test/test_helper.rb: -------------------------------------------------------------------------------- 1 | ENV['RAILS_ENV'] ||= 'test' 2 | require File.expand_path('../../config/environment', __FILE__) 3 | require 'rails/test_help' 4 | 5 | class ActiveSupport::TestCase 6 | # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order. 7 | fixtures :all 8 | 9 | # Add more helper methods to be used by all tests here... 10 | end 11 | -------------------------------------------------------------------------------- /frontend/actions/TweetActions.js: -------------------------------------------------------------------------------- 1 | var appDispatcher = require('../dispatcher'); 2 | var TweetConstants = require('../constants/TweetConstants'); 3 | var TweetActions = { 4 | receiveTweets: function (tweets) { 5 | appDispatcher.dispatch({ 6 | actionType: TweetConstants.RECEIVE_ALL, 7 | tweets: tweets 8 | }); 9 | } 10 | }; 11 | 12 | module.exports = TweetActions; 13 | -------------------------------------------------------------------------------- /app/views/tweets/show.html.erb: -------------------------------------------------------------------------------- 1 |

<%= @tweet.body %>

2 |

<%= @tweet.author.name %>

3 | 4 |
5 | 6 | 7 |
8 | 9 | Back to Tweets 10 | Edit 11 | -------------------------------------------------------------------------------- /notes/aws_policy.js: -------------------------------------------------------------------------------- 1 | { 2 | "Version": "2012-10-17", 3 | "Statement": [ 4 | { 5 | "Sid": "Stmt1420751757000", 6 | "Effect": "Allow", 7 | "Action": [ 8 | "s3:*" 9 | ], 10 | "Resource": [ 11 | "arn:aws:s3:::BUCKET-NAME-DEV", 12 | "arn:aws:s3:::BUCKET-NAME-DEV/*", 13 | "arn:aws:s3:::BUCKET-NAME-PRO", 14 | "arn:aws:s3:::BUCKET-NAME-PRO/*" 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /config/initializers/backtrace_silencers.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces. 4 | # Rails.backtrace_cleaner.add_silencer { |line| line =~ /my_noisy_library/ } 5 | 6 | # You can also remove all the silencers if you're trying to debug a problem that might stem from framework code. 7 | # Rails.backtrace_cleaner.remove_silencers! 8 | -------------------------------------------------------------------------------- /app/controllers/api/tweets_controller.rb: -------------------------------------------------------------------------------- 1 | class Api::TweetsController < ApplicationController 2 | 3 | def index 4 | @tweets = Tweet.includes(:author).all.order(created_at: :desc) 5 | end 6 | 7 | def create 8 | @tweet = User.find_by(name: "Fred").tweets.create(tweet_params) 9 | render :show 10 | end 11 | 12 | def show 13 | @tweet = Tweet.find(params[:id]) 14 | end 15 | 16 | private 17 | 18 | def tweet_params 19 | params.require(:tweet).permit(:body, :image) 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /app/models/country.rb: -------------------------------------------------------------------------------- 1 | # == Schema Information 2 | # 3 | # Table name: countries 4 | # 5 | # id :integer not null, primary key 6 | # name :string not null 7 | # created_at :datetime 8 | # updated_at :datetime 9 | # 10 | 11 | class Country < ActiveRecord::Base 12 | has_many( 13 | :users, 14 | class_name: "User", 15 | foreign_key: :country_id, 16 | primary_key: :id 17 | ) 18 | 19 | has_many( 20 | :tweets, 21 | through: :users, 22 | source: :tweets 23 | ) 24 | end 25 | -------------------------------------------------------------------------------- /config/initializers/assets.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Version of your assets, change this if you want to expire all your assets. 4 | Rails.application.config.assets.version = '1.0' 5 | 6 | # Add additional assets to the asset load path 7 | # Rails.application.config.assets.paths << Emoji.images_path 8 | 9 | # Precompile additional assets. 10 | # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. 11 | # Rails.application.config.assets.precompile += %w( search.js ) 12 | -------------------------------------------------------------------------------- /bin/spring: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | # This file loads spring without using Bundler, in order to be fast. 4 | # It gets overwritten when you run the `spring binstub` command. 5 | 6 | unless defined?(Spring) 7 | require 'rubygems' 8 | require 'bundler' 9 | 10 | if (match = Bundler.default_lockfile.read.match(/^GEM$.*?^ (?: )*spring \((.*?)\)$.*?^$/m)) 11 | Gem.paths = { 'GEM_PATH' => [Bundler.bundle_path.to_s, *Gem.path].uniq.join(Gem.path_separator) } 12 | gem 'spring', match[1] 13 | require 'spring/binstub' 14 | end 15 | end 16 | -------------------------------------------------------------------------------- /config/initializers/wrap_parameters.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # This file contains settings for ActionController::ParamsWrapper which 4 | # is enabled by default. 5 | 6 | # Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array. 7 | ActiveSupport.on_load(:action_controller) do 8 | wrap_parameters format: [:json] if respond_to?(:wrap_parameters) 9 | end 10 | 11 | # To enable root element in JSON for ActiveRecord objects. 12 | # ActiveSupport.on_load(:active_record) do 13 | # self.include_root_in_json = true 14 | # end 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twitterClone", 3 | "version": "1.0.0", 4 | "description": "== README", 5 | "main": "index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "babel-core": "^6.9.0", 17 | "babel-loader": "^6.2.4", 18 | "babel-preset-react": "^6.5.0", 19 | "flux": "^2.1.1", 20 | "react": "^15.1.0", 21 | "react-dom": "^15.1.0", 22 | "react-router": "^2.0.0", 23 | "webpack": "^1.13.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile '~/.gitignore_global' 6 | 7 | # Ignore bundler config. 8 | /.bundle 9 | 10 | # Ignore all logfiles and tempfiles. 11 | /log/* 12 | !/log/.keep 13 | /tmp 14 | 15 | node_modules 16 | app/assets/javascripts/bundle.js 17 | app/assets/javascripts/bundle.js.map 18 | 19 | .DS_Store 20 | .byebug_history 21 | 22 | # Ignore application configuration 23 | /config/application.yml 24 | -------------------------------------------------------------------------------- /config/initializers/inflections.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new inflection rules using the following format. Inflections 4 | # are locale specific, and you may define rules for as many different 5 | # locales as you wish. All of these examples are active by default: 6 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 7 | # inflect.plural /^(ox)$/i, '\1en' 8 | # inflect.singular /^(ox)en/i, '\1' 9 | # inflect.irregular 'person', 'people' 10 | # inflect.uncountable %w( fish sheep ) 11 | # end 12 | 13 | # These inflection rules are supported but not enabled by default: 14 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 15 | # inflect.acronym 'RESTful' 16 | # end 17 | -------------------------------------------------------------------------------- /config/locales/en.yml: -------------------------------------------------------------------------------- 1 | # Files in the config/locales directory are used for internationalization 2 | # and are automatically loaded by Rails. If you want to use locales other 3 | # than English, add the necessary files in this directory. 4 | # 5 | # To use the locales, use `I18n.t`: 6 | # 7 | # I18n.t 'hello' 8 | # 9 | # In views, this is aliased to just `t`: 10 | # 11 | # <%= t('hello') %> 12 | # 13 | # To use a different locale, set it with `I18n.locale`: 14 | # 15 | # I18n.locale = :es 16 | # 17 | # This would use the information in config/locales/es.yml. 18 | # 19 | # To learn more, please read the Rails Internationalization guide 20 | # available at http://guides.rubyonrails.org/i18n.html. 21 | 22 | en: 23 | hello: "Hello world" 24 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | 4 | ruby '2.1.2' 5 | 6 | gem 'rails', '4.2.6' 7 | gem 'pg', '~> 0.15' 8 | gem 'sass-rails', '~> 5.0' 9 | gem 'uglifier', '>= 1.3.0' 10 | gem 'coffee-rails', '~> 4.1.0' 11 | 12 | gem 'jquery-rails' 13 | gem 'turbolinks' 14 | gem 'jbuilder', '~> 2.0' 15 | gem 'sdoc', '~> 0.4.0', group: :doc 16 | gem 'bcrypt', '~> 3.1.7' 17 | 18 | gem 'pry-rails' 19 | gem 'faker' 20 | 21 | 22 | gem "paperclip", '5.0.0.beta1' 23 | gem 'figaro' 24 | gem 'aws-sdk', '>= 2.0' 25 | 26 | group :development, :test do 27 | gem 'byebug' 28 | end 29 | 30 | group :development do 31 | gem 'web-console', '~> 2.0' 32 | gem 'annotate' 33 | 34 | gem 'spring' 35 | gem 'better_errors' 36 | gem 'binding_of_caller' 37 | 38 | end 39 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | module.exports = { 4 | context: __dirname, 5 | entry: "./frontend/twitter.jsx", 6 | output: { 7 | path: path.join(__dirname, 'app', 'assets', 'javascripts'), 8 | filename: "bundle.js", 9 | devtoolModuleFilenameTemplate: '[resourcePath]', 10 | devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]' 11 | }, 12 | module: { 13 | loaders: [ 14 | { 15 | test: /\.jsx?$/, 16 | exclude: /(node_modules|bower_components)/, 17 | loader: 'babel', 18 | query: { 19 | presets: ["react"] 20 | } 21 | } 22 | ] 23 | }, 24 | devtool: 'source-maps', 25 | resolve: { 26 | extensions: ["", ".js", ".jsx" ] 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /app/assets/javascripts/application.js: -------------------------------------------------------------------------------- 1 | // This is a manifest file that'll be compiled into application.js, which will include all the files 2 | // listed below. 3 | // 4 | // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 5 | // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 6 | // 7 | // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8 | // compiled file. 9 | // 10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11 | // about supported directives. 12 | // 13 | //= require jquery 14 | //= require jquery_ujs 15 | //= require turbolinks 16 | //= require bundle 17 | //= require_tree . 18 | -------------------------------------------------------------------------------- /app/assets/stylesheets/application.css: -------------------------------------------------------------------------------- 1 | /* 2 | * This is a manifest file that'll be compiled into application.css, which will include all the files 3 | * listed below. 4 | * 5 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 6 | * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 7 | * 8 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 | * compiled file so the styles you add here take precedence over styles defined in any styles 10 | * defined in the other CSS/SCSS files in this directory. It is generally better to create a new 11 | * file per style scope. 12 | * 13 | *= require_tree . 14 | *= require_self 15 | */ 16 | -------------------------------------------------------------------------------- /app/models/tweet.rb: -------------------------------------------------------------------------------- 1 | # == Schema Information 2 | # 3 | # Table name: tweets 4 | # 5 | # id :integer not null, primary key 6 | # body :string not null 7 | # created_at :datetime 8 | # updated_at :datetime 9 | # author_id :integer not null 10 | # 11 | 12 | class Tweet < ActiveRecord::Base 13 | validates :body, presence: true 14 | validates :author_id, presence: true 15 | 16 | has_attached_file :image, default_url: "corgi.jpg" 17 | validates_attachment_content_type :image, content_type: /\Aimage\/.*\Z/ 18 | 19 | 20 | belongs_to( 21 | :author, 22 | class_name: "User", 23 | foreign_key: :author_id, 24 | primary_key: :id 25 | ) 26 | 27 | has_one( 28 | :country, 29 | through: :author, 30 | source: :country 31 | ) 32 | end 33 | -------------------------------------------------------------------------------- /frontend/utils/TweetApi.js: -------------------------------------------------------------------------------- 1 | var TweetActions = require('../actions/TweetActions'); 2 | 3 | var TweetApi = { 4 | fetchTweets: function () { 5 | $.ajax({ 6 | url: "/api/tweets", 7 | method: "GET", 8 | dataType: 'json', 9 | success: function (tweets) { 10 | TweetActions.receiveTweets(tweets); 11 | }, 12 | error: function () { 13 | console.log('error, couldn\'t fetch tweets'); 14 | } 15 | }); 16 | }, 17 | 18 | createTweet: function (formData, callback) { 19 | $.ajax({ 20 | url: "/api/tweets", 21 | method: "POST", 22 | dataType: "json", 23 | contentType: false, 24 | processData: false, 25 | data: formData, 26 | success: function() { 27 | callback(); 28 | } 29 | }); 30 | }, 31 | 32 | 33 | 34 | }; 35 | 36 | module.exports = TweetApi; 37 | -------------------------------------------------------------------------------- /app/views/tweets/_form.html.erb: -------------------------------------------------------------------------------- 1 | 6 | 7 | <% if tweet.persisted? %> 8 | <% url = tweet_url(tweet.id) %> 9 | <% button_text = "Update tweet!" %> 10 | <% else %> 11 | <% url = tweets_url %> 12 | <% button_text = "Create tweet!" %> 13 | <% end %> 14 | 15 |
16 | <% if tweet.persisted? %> 17 | 18 | <% end %> 19 | 20 | 21 | 22 | 23 | 27 | 28 | 29 |
30 | -------------------------------------------------------------------------------- /bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require 'pathname' 3 | 4 | # path to your application root. 5 | APP_ROOT = Pathname.new File.expand_path('../../', __FILE__) 6 | 7 | Dir.chdir APP_ROOT do 8 | # This script is a starting point to setup your application. 9 | # Add necessary setup steps to this file: 10 | 11 | puts "== Installing dependencies ==" 12 | system "gem install bundler --conservative" 13 | system "bundle check || bundle install" 14 | 15 | # puts "\n== Copying sample files ==" 16 | # unless File.exist?("config/database.yml") 17 | # system "cp config/database.yml.sample config/database.yml" 18 | # end 19 | 20 | puts "\n== Preparing database ==" 21 | system "bin/rake db:setup" 22 | 23 | puts "\n== Removing old logs and tempfiles ==" 24 | system "rm -f log/*" 25 | system "rm -rf tmp/cache" 26 | 27 | puts "\n== Restarting application server ==" 28 | system "touch tmp/restart.txt" 29 | end 30 | -------------------------------------------------------------------------------- /frontend/stores/TweetStore.js: -------------------------------------------------------------------------------- 1 | var Store = require('flux/utils').Store; 2 | var appDispatcher = require('../dispatcher'); 3 | var TweetStore = new Store(appDispatcher); 4 | var TweetConstants = require('../constants/TweetConstants'); 5 | 6 | _tweets = []; 7 | 8 | TweetStore.all = function () { 9 | return _tweets.slice(); 10 | }; 11 | 12 | TweetStore.find = function (id) { 13 | var returnTweet; 14 | _tweets.forEach(function (tweet) { 15 | if (tweet.id === id) returnTweet = tweet; 16 | }); 17 | return returnTweet; 18 | }; 19 | 20 | TweetStore.__onDispatch = function (payload) { 21 | switch (payload.actionType) { 22 | case TweetConstants.RECEIVE_ALL: 23 | _tweets = payload.tweets; 24 | this.__emitChange(); 25 | break; 26 | case TweetConstants.RECEIVE_NEW: 27 | _tweets.push(payload.tweet); 28 | this.__emitChange(); 29 | break; 30 | } 31 | }; 32 | 33 | module.exports = TweetStore; 34 | -------------------------------------------------------------------------------- /config/secrets.yml: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Your secret key is used for verifying the integrity of signed cookies. 4 | # If you change this key, all old signed cookies will become invalid! 5 | 6 | # Make sure the secret is at least 30 characters and all random, 7 | # no regular words or you'll be exposed to dictionary attacks. 8 | # You can use `rake secret` to generate a secure secret key. 9 | 10 | # Make sure the secrets in this file are kept private 11 | # if you're sharing your code publicly. 12 | 13 | development: 14 | secret_key_base: 0d8822e199ea8ad65befdf38a990d60d6208a325131f73c07683f6585dec8478cd2bf9ca4effea552da7932bc1061910918b7d483b4ed382ee62d194329719f0 15 | 16 | test: 17 | secret_key_base: 426bf20b125e6b5daf9547031b2a1a8ceb2981bd7a08e73c7de344bde7e9149fb5c71a580e0e29ed3c20097d06703743e5b090502561fab6e59f21ccd81246f5 18 | 19 | # Do not keep production secrets in the repository, 20 | # instead read values from the environment. 21 | production: 22 | secret_key_base: <%= ENV["SECRET_KEY_BASE"] %> 23 | -------------------------------------------------------------------------------- /frontend/twitter.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | var ReactDOM = require("react-dom"); 3 | 4 | var ReactRouter = require("react-router"); 5 | var IndexRoute = ReactRouter.IndexRoute; 6 | var Router = ReactRouter.Router; 7 | var Route = ReactRouter.Route; 8 | var hashHistory = ReactRouter.hashHistory; 9 | 10 | var TweetIndex = require("./components/TweetIndex.jsx"); 11 | var TweetForm = require("./components/TweetForm.jsx"); 12 | 13 | 14 | var App = React.createClass({ 15 | render: function () { 16 | return( 17 |
18 |

Welcome to Tweetstagram!

19 | {this.props.children} 20 |
21 | ); 22 | } 23 | }); 24 | 25 | var routes = ( 26 | 27 | 28 | 29 | 30 | ); 31 | 32 | document.addEventListener('DOMContentLoaded', function () { 33 | ReactDOM.render( 34 | 35 | {routes} 36 | , 37 | document.getElementById("root") 38 | ); 39 | }); 40 | -------------------------------------------------------------------------------- /frontend/components/TweetIndex.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | var Link = require("react-router").Link; 3 | 4 | var TweetStore = require("../stores/TweetStore.js"); 5 | var TweetApi = require('../utils/TweetApi'); 6 | 7 | var TweetIndex = React.createClass({ 8 | 9 | getInitialState: function () { 10 | return { tweets: [] }; 11 | }, 12 | 13 | componentDidMount: function () { 14 | this.listener = TweetStore.addListener(this.updateTweets); 15 | TweetApi.fetchTweets(); 16 | }, 17 | 18 | componentWillUnmount: function () { 19 | this.listener.remove(); 20 | }, 21 | 22 | updateTweets: function () { 23 | this.setState({ tweets: TweetStore.all() }); 24 | }, 25 | 26 | tweets: function () { 27 | return this.state.tweets.map(function (tweet) { 28 | return ( 29 |
30 | 31 |

{ tweet.body }

32 |

{"- " + tweet.author_name }

33 |
34 | ); 35 | }); 36 | }, 37 | 38 | render: function () { 39 | 40 | return ( 41 |
42 | New Tweet 43 | {this.props.children} 44 | { this.tweets() } 45 |
46 | ); 47 | } 48 | 49 | }); 50 | 51 | 52 | module.exports = TweetIndex; 53 | -------------------------------------------------------------------------------- /app/models/user.rb: -------------------------------------------------------------------------------- 1 | # == Schema Information 2 | # 3 | # Table name: users 4 | # 5 | # id :integer not null, primary key 6 | # name :string not null 7 | # email :string not null 8 | # created_at :datetime 9 | # updated_at :datetime 10 | # country_id :integer not null 11 | # 12 | 13 | class User < ActiveRecord::Base 14 | belongs_to( 15 | :country, 16 | class_name: "Country", 17 | foreign_key: :country_id, 18 | primary_key: :id 19 | ) 20 | 21 | has_many( 22 | :tweets, 23 | class_name: "Tweet", 24 | foreign_key: :author_id, 25 | primary_key: :id 26 | ) 27 | 28 | def self.usernames_and_tweet_counts_n_plus_one_version 29 | tweet_counts = {} 30 | 31 | User.all.each do |user| 32 | tweet_counts[user.name] = user.tweets.length 33 | end 34 | 35 | tweet_counts 36 | end 37 | 38 | def self.usernames_and_tweet_counts_two_queries_version 39 | tweet_counts = {} 40 | 41 | User.includes(:tweets).all.each do |user| 42 | tweet_counts[user.name] = user.tweets.length 43 | end 44 | 45 | tweet_counts 46 | end 47 | 48 | def self.usernames_and_tweet_counts 49 | tweet_counts = {} 50 | 51 | users = User 52 | .select("users.*, COUNT(tweets.id) AS tweet_count") 53 | .joins(:tweets) 54 | .group(:id) 55 | 56 | users.each do |user| 57 | tweet_counts[user.name] = user.tweet_count 58 | end 59 | 60 | tweet_counts 61 | 62 | end 63 | 64 | end 65 | -------------------------------------------------------------------------------- /config/application.rb: -------------------------------------------------------------------------------- 1 | require File.expand_path('../boot', __FILE__) 2 | 3 | require 'rails/all' 4 | 5 | # Require the gems listed in Gemfile, including any gems 6 | # you've limited to :test, :development, or :production. 7 | Bundler.require(*Rails.groups) 8 | 9 | module Twitter 10 | class Application < Rails::Application 11 | # Settings in config/environments/* take precedence over those specified here. 12 | # Application configuration should go into files in config/initializers 13 | # -- all .rb files in that directory are automatically loaded. 14 | 15 | # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. 16 | # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. 17 | # config.time_zone = 'Central Time (US & Canada)' 18 | 19 | # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. 20 | # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] 21 | # config.i18n.default_locale = :de 22 | 23 | # DO NOT PLACE YOUR AWS KEYS IN THIS FILE, keep them in application yml and DO NOT push them to github. 24 | config.paperclip_defaults = { 25 | :storage => :s3, 26 | :s3_credentials => { 27 | :bucket => ENV["s3_bucket"], 28 | :access_key_id => ENV["s3_access_key_id"], 29 | :secret_access_key => ENV["s3_secret_access_key"], 30 | :s3_region => ENV["s3_region"] 31 | } 32 | } 33 | 34 | # Do not swallow errors in after_commit/after_rollback callbacks. 35 | config.active_record.raise_in_transactional_callbacks = true 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /db/seeds.rb: -------------------------------------------------------------------------------- 1 | # This file should contain all the record creation needed to seed the database with its default values. 2 | # The data can then be loaded with the rake db:seed (or created alongside the db with db:setup). 3 | # 4 | # Examples: 5 | # 6 | # cities = City.create([{ name: 'Chicago' }, { name: 'Copenhagen' }]) 7 | # Mayor.create(name: 'Emanuel', city: cities.first) 8 | 9 | Tweet.destroy_all 10 | User.destroy_all 11 | Country.destroy_all 12 | 13 | usa = Country.create!(name: "USA") 14 | murica = Country.create!(name: "'murica") 15 | aa = Country.create!(name: "App Academy") 16 | argentina = Country.create!(name: "Argentina") 17 | belgium = Country.create!(name: "Belgium") 18 | 19 | gigi = User.create!(name: "Gigi", email: "gigi@email.com", country: usa) 20 | daniel = User.create!(name: "Daniel", email: "daniel@email.com", country: murica) 21 | leen = User.create!(name: "Leen", email: "leen@email.com", country: belgium) 22 | fred = User.create!(name: "Fred", email: "fred@email.com", country: murica) 23 | carl = User.create!(name: "Carl", email: "carl@email.com", country: usa) 24 | tommy = User.create!(name: "Tommy", email: "tommy@email.com", country: argentina) 25 | jonathan = User.create!(name: "Jonathan", email: "jonathan@email.com", country: aa) 26 | 27 | users = [gigi, daniel, leen, fred, carl, tommy, jonathan] 28 | 29 | 20.times do 30 | body = Faker::Hipster.sentence 31 | Tweet.create!(author: users.sample, body: body) 32 | end 33 | 34 | 5.times do 35 | body = Faker::StarWars.quote 36 | Tweet.create!(author: users.sample, body: body) 37 | end 38 | 39 | 25.times do 40 | body = Faker::Hipster.sentence 41 | Tweet.create!(author: users.sample, body: body) 42 | end 43 | -------------------------------------------------------------------------------- /public/500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | We're sorry, but something went wrong (500) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

We're sorry, but something went wrong.

62 |
63 |

If you are the application owner check the logs for more information.

64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /frontend/components/TweetForm.jsx: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | var Link = require("react-router").Link; 3 | 4 | var TweetStore = require("../stores/TweetStore.js"); 5 | var TweetApi = require('../utils/TweetApi'); 6 | 7 | var TweetForm = React.createClass({ 8 | contextTypes: { 9 | router: React.PropTypes.object.isRequired 10 | }, 11 | 12 | getInitialState: function () { 13 | return({ 14 | body: "", 15 | imageFile: null, 16 | imageUrl: null 17 | }); 18 | }, 19 | 20 | updateBody: function (e) { 21 | this.setState({ 22 | body: e.target.value 23 | }); 24 | }, 25 | 26 | updateFile: function (e) { 27 | var file = e.currentTarget.files[0]; 28 | var fileReader = new FileReader(); 29 | fileReader.onloadend = function () { 30 | this.setState({ imageFile: file, imageUrl: fileReader.result }); 31 | }.bind(this); 32 | 33 | if (file) { 34 | fileReader.readAsDataURL(file); 35 | } 36 | }, 37 | 38 | handleSubmit: function (e) { 39 | var formData = new FormData(); 40 | formData.append("tweet[body]", this.state.body); 41 | formData.append("tweet[image]", this.state.imageFile); 42 | TweetApi.createTweet(formData, this.goBack); 43 | }, 44 | 45 | goBack: function () { 46 | this.context.router.push("/"); 47 | }, 48 | 49 | render: function () { 50 | 51 | return( 52 |
53 | Tweet form! 54 | 55 | Back to Tweets 56 | 57 | 58 | 59 | 60 |
); 61 | } 62 | }); 63 | 64 | module.exports = TweetForm; 65 | -------------------------------------------------------------------------------- /config/environments/development.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # In the development environment your application's code is reloaded on 5 | # every request. This slows down response time but is perfect for development 6 | # since you don't have to restart the web server when you make code changes. 7 | config.cache_classes = false 8 | 9 | # Do not eager load code on boot. 10 | config.eager_load = false 11 | 12 | # Show full error reports and disable caching. 13 | config.consider_all_requests_local = true 14 | config.action_controller.perform_caching = false 15 | 16 | # Don't care if the mailer can't send. 17 | config.action_mailer.raise_delivery_errors = false 18 | 19 | # Print deprecation notices to the Rails logger. 20 | config.active_support.deprecation = :log 21 | 22 | # Raise an error on page load if there are pending migrations. 23 | config.active_record.migration_error = :page_load 24 | 25 | # Debug mode disables concatenation and preprocessing of assets. 26 | # This option may cause significant delays in view rendering with a large 27 | # number of complex assets. 28 | config.assets.debug = true 29 | 30 | # Asset digests allow you to set far-future HTTP expiration dates on all assets, 31 | # yet still be able to expire them through the digest params. 32 | config.assets.digest = true 33 | 34 | # Adds additional error checking when serving assets at runtime. 35 | # Checks for improperly declared sprockets dependencies. 36 | # Raises helpful error messages. 37 | config.assets.raise_runtime_errors = true 38 | 39 | # Raises error for missing translations 40 | # config.action_view.raise_on_missing_translations = true 41 | end 42 | -------------------------------------------------------------------------------- /public/422.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The change you wanted was rejected (422) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

The change you wanted was rejected.

62 |

Maybe you tried to change something you didn't have access to.

63 |
64 |

If you are the application owner check the logs for more information.

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The page you were looking for doesn't exist (404) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

The page you were looking for doesn't exist.

62 |

You may have mistyped the address or the page may have moved.

63 |
64 |

If you are the application owner check the logs for more information.

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /app/controllers/tweets_controller.rb: -------------------------------------------------------------------------------- 1 | class TweetsController < ApplicationController 2 | 3 | def index 4 | @tweets = Tweet.all 5 | end 6 | 7 | def show 8 | @tweet = Tweet.find(params[:id]) 9 | render :show 10 | end 11 | 12 | def new 13 | @tweet = Tweet.new 14 | render :new 15 | end 16 | 17 | def create 18 | @tweet = Tweet.new(tweet_params) 19 | 20 | if @tweet.save 21 | redirect_to tweet_url(@tweet.id) 22 | else 23 | render :new 24 | end 25 | end 26 | 27 | def edit 28 | @tweet = Tweet.find(params[:id]) 29 | render :edit 30 | end 31 | 32 | def update 33 | @tweet = Tweet.find(params[:id]) 34 | if @tweet.update(tweet_params) 35 | redirect_to tweet_url(@tweet.id) 36 | else 37 | render :edit 38 | end 39 | 40 | end 41 | 42 | def destroy 43 | Tweet.find(params[:id]).destroy 44 | redirect_to tweets_url 45 | end 46 | 47 | 48 | 49 | private 50 | 51 | def tweet_params 52 | params.require(:tweet).permit(:body, :author_id) 53 | end 54 | 55 | 56 | 57 | 58 | end 59 | 60 | 61 | # NAMESPACING 62 | # Namespace your form data! ie tweet[body] 63 | # {"tweet" => { 64 | # "body" => "Ain't Rails Grand", 65 | # "author_id" => 8 66 | # } 67 | #} 68 | 69 | # STRONG PARAMS 70 | # Use strong params! Tweet.new(params[:tweet]) == security problem. 71 | # famous example that triggered the move to strong_params: the github hack! 72 | # someone set his own user_id on Github to that of an admin. 73 | # check it out here: https://gist.github.com/peternixey/1978249 74 | # strong_params are only relevant for non-GET requests (where you're updating db) 75 | # you have to specifically whitelist params you want to allow 76 | 77 | # WHAT IS PARAMS ANYWAY 78 | # Params: a method that Rails gives you 79 | # returns a "hash-like" object that you can index into just 80 | # like a hash. e.g., to pull out id from params you'll do `params[:id]` 81 | -------------------------------------------------------------------------------- /config/environments/test.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # The test environment is used exclusively to run your application's 5 | # test suite. You never need to work with it otherwise. Remember that 6 | # your test database is "scratch space" for the test suite and is wiped 7 | # and recreated between test runs. Don't rely on the data there! 8 | config.cache_classes = true 9 | 10 | # Do not eager load code on boot. This avoids loading your whole application 11 | # just for the purpose of running a single test. If you are using a tool that 12 | # preloads Rails for running tests, you may have to set it to true. 13 | config.eager_load = false 14 | 15 | # Configure static file server for tests with Cache-Control for performance. 16 | config.serve_static_files = true 17 | config.static_cache_control = 'public, max-age=3600' 18 | 19 | # Show full error reports and disable caching. 20 | config.consider_all_requests_local = true 21 | config.action_controller.perform_caching = false 22 | 23 | # Raise exceptions instead of rendering exception templates. 24 | config.action_dispatch.show_exceptions = false 25 | 26 | # Disable request forgery protection in test environment. 27 | config.action_controller.allow_forgery_protection = false 28 | 29 | # Tell Action Mailer not to deliver emails to the real world. 30 | # The :test delivery method accumulates sent emails in the 31 | # ActionMailer::Base.deliveries array. 32 | config.action_mailer.delivery_method = :test 33 | 34 | # Randomize the order test cases are executed. 35 | config.active_support.test_order = :random 36 | 37 | # Print deprecation notices to the stderr. 38 | config.active_support.deprecation = :stderr 39 | 40 | # Raises error for missing translations 41 | # config.action_view.raise_on_missing_translations = true 42 | end 43 | -------------------------------------------------------------------------------- /db/schema.rb: -------------------------------------------------------------------------------- 1 | # encoding: UTF-8 2 | # This file is auto-generated from the current state of the database. Instead 3 | # of editing this file, please use the migrations feature of Active Record to 4 | # incrementally modify your database, and then regenerate this schema definition. 5 | # 6 | # Note that this schema.rb definition is the authoritative source for your 7 | # database schema. If you need to create the application database on another 8 | # system, you should be using db:schema:load, not running all the migrations 9 | # from scratch. The latter is a flawed and unsustainable approach (the more migrations 10 | # you'll amass, the slower it'll run and the greater likelihood for issues). 11 | # 12 | # It's strongly recommended that you check this file into your version control system. 13 | 14 | ActiveRecord::Schema.define(version: 20160602145916) do 15 | 16 | # These are extensions that must be enabled in order to support this database 17 | enable_extension "plpgsql" 18 | 19 | create_table "countries", force: :cascade do |t| 20 | t.string "name", null: false 21 | t.datetime "created_at" 22 | t.datetime "updated_at" 23 | end 24 | 25 | create_table "tweets", force: :cascade do |t| 26 | t.string "body", null: false 27 | t.datetime "created_at" 28 | t.datetime "updated_at" 29 | t.integer "author_id", null: false 30 | t.string "image_file_name" 31 | t.string "image_content_type" 32 | t.integer "image_file_size" 33 | t.datetime "image_updated_at" 34 | end 35 | 36 | add_index "tweets", ["author_id"], name: "index_tweets_on_author_id", using: :btree 37 | 38 | create_table "users", force: :cascade do |t| 39 | t.string "name", null: false 40 | t.string "email", null: false 41 | t.datetime "created_at" 42 | t.datetime "updated_at" 43 | t.integer "country_id", null: false 44 | end 45 | 46 | add_index "users", ["country_id"], name: "index_users_on_country_id", using: :btree 47 | 48 | end 49 | -------------------------------------------------------------------------------- /config/database.yml: -------------------------------------------------------------------------------- 1 | # PostgreSQL. Versions 8.2 and up are supported. 2 | # 3 | # Install the pg driver: 4 | # gem install pg 5 | # On OS X with Homebrew: 6 | # gem install pg -- --with-pg-config=/usr/local/bin/pg_config 7 | # On OS X with MacPorts: 8 | # gem install pg -- --with-pg-config=/opt/local/lib/postgresql84/bin/pg_config 9 | # On Windows: 10 | # gem install pg 11 | # Choose the win32 build. 12 | # Install PostgreSQL and put its /bin directory on your path. 13 | # 14 | # Configure Using Gemfile 15 | # gem 'pg' 16 | # 17 | default: &default 18 | adapter: postgresql 19 | encoding: unicode 20 | # For details on connection pooling, see rails configuration guide 21 | # http://guides.rubyonrails.org/configuring.html#database-pooling 22 | pool: 5 23 | 24 | development: 25 | <<: *default 26 | database: twitter_development 27 | 28 | # The specified database role being used to connect to postgres. 29 | # To create additional roles in postgres see `$ createuser --help`. 30 | # When left blank, postgres will use the default role. This is 31 | # the same name as the operating system user that initialized the database. 32 | #username: twitter 33 | 34 | # The password associated with the postgres role (username). 35 | #password: 36 | 37 | # Connect on a TCP socket. Omitted by default since the client uses a 38 | # domain socket that doesn't need configuration. Windows does not have 39 | # domain sockets, so uncomment these lines. 40 | #host: localhost 41 | 42 | # The TCP port the server listens on. Defaults to 5432. 43 | # If your server runs on a different port number, change accordingly. 44 | #port: 5432 45 | 46 | # Schema search path. The server defaults to $user,public 47 | #schema_search_path: myapp,sharedapp,public 48 | 49 | # Minimum log levels, in increasing order: 50 | # debug5, debug4, debug3, debug2, debug1, 51 | # log, notice, warning, error, fatal, and panic 52 | # Defaults to warning. 53 | #min_messages: notice 54 | 55 | # Warning: The database defined as "test" will be erased and 56 | # re-generated from your development database when you run "rake". 57 | # Do not set this db to the same as development or production. 58 | test: 59 | <<: *default 60 | database: twitter_test 61 | 62 | # As with config/secrets.yml, you never want to store sensitive information, 63 | # like your database password, in your source code. If your source code is 64 | # ever seen by anyone, they now have access to your database. 65 | # 66 | # Instead, provide the password as a unix environment variable when you boot 67 | # the app. Read http://guides.rubyonrails.org/configuring.html#configuring-a-database 68 | # for a full rundown on how to provide these environment variables in a 69 | # production deployment. 70 | # 71 | # On Heroku and other platform providers, you may have a full connection URL 72 | # available as an environment variable. For example: 73 | # 74 | # DATABASE_URL="postgres://myuser:mypass@localhost/somedatabase" 75 | # 76 | # You can use this database configuration with: 77 | # 78 | # production: 79 | # url: <%= ENV['DATABASE_URL'] %> 80 | # 81 | production: 82 | <<: *default 83 | database: twitter_production 84 | username: twitter 85 | password: <%= ENV['TWITTER_DATABASE_PASSWORD'] %> 86 | -------------------------------------------------------------------------------- /config/environments/production.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # Code is not reloaded between requests. 5 | config.cache_classes = true 6 | 7 | # Eager load code on boot. This eager loads most of Rails and 8 | # your application in memory, allowing both threaded web servers 9 | # and those relying on copy on write to perform better. 10 | # Rake tasks automatically ignore this option for performance. 11 | config.eager_load = true 12 | 13 | # Full error reports are disabled and caching is turned on. 14 | config.consider_all_requests_local = false 15 | config.action_controller.perform_caching = true 16 | 17 | # Enable Rack::Cache to put a simple HTTP cache in front of your application 18 | # Add `rack-cache` to your Gemfile before enabling this. 19 | # For large-scale production use, consider using a caching reverse proxy like 20 | # NGINX, varnish or squid. 21 | # config.action_dispatch.rack_cache = true 22 | 23 | # Disable serving static files from the `/public` folder by default since 24 | # Apache or NGINX already handles this. 25 | config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present? 26 | 27 | # Compress JavaScripts and CSS. 28 | config.assets.js_compressor = :uglifier 29 | # config.assets.css_compressor = :sass 30 | 31 | # Do not fallback to assets pipeline if a precompiled asset is missed. 32 | config.assets.compile = false 33 | 34 | # Asset digests allow you to set far-future HTTP expiration dates on all assets, 35 | # yet still be able to expire them through the digest params. 36 | config.assets.digest = true 37 | 38 | # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb 39 | 40 | # Specifies the header that your server uses for sending files. 41 | # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache 42 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX 43 | 44 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. 45 | # config.force_ssl = true 46 | 47 | # Use the lowest log level to ensure availability of diagnostic information 48 | # when problems arise. 49 | config.log_level = :debug 50 | 51 | # Prepend all log lines with the following tags. 52 | # config.log_tags = [ :subdomain, :uuid ] 53 | 54 | # Use a different logger for distributed setups. 55 | # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new) 56 | 57 | # Use a different cache store in production. 58 | # config.cache_store = :mem_cache_store 59 | 60 | # Enable serving of images, stylesheets, and JavaScripts from an asset server. 61 | # config.action_controller.asset_host = 'http://assets.example.com' 62 | 63 | # Ignore bad email addresses and do not raise email delivery errors. 64 | # Set this to true and configure the email server for immediate delivery to raise delivery errors. 65 | # config.action_mailer.raise_delivery_errors = false 66 | 67 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to 68 | # the I18n.default_locale when a translation cannot be found). 69 | config.i18n.fallbacks = true 70 | 71 | # Send deprecation notices to registered listeners. 72 | config.active_support.deprecation = :notify 73 | 74 | # Use default logging formatter so that PID and timestamp are not suppressed. 75 | config.log_formatter = ::Logger::Formatter.new 76 | 77 | # Do not dump schema after migrations. 78 | config.active_record.dump_schema_after_migration = false 79 | end 80 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | actionmailer (4.2.6) 5 | actionpack (= 4.2.6) 6 | actionview (= 4.2.6) 7 | activejob (= 4.2.6) 8 | mail (~> 2.5, >= 2.5.4) 9 | rails-dom-testing (~> 1.0, >= 1.0.5) 10 | actionpack (4.2.6) 11 | actionview (= 4.2.6) 12 | activesupport (= 4.2.6) 13 | rack (~> 1.6) 14 | rack-test (~> 0.6.2) 15 | rails-dom-testing (~> 1.0, >= 1.0.5) 16 | rails-html-sanitizer (~> 1.0, >= 1.0.2) 17 | actionview (4.2.6) 18 | activesupport (= 4.2.6) 19 | builder (~> 3.1) 20 | erubis (~> 2.7.0) 21 | rails-dom-testing (~> 1.0, >= 1.0.5) 22 | rails-html-sanitizer (~> 1.0, >= 1.0.2) 23 | activejob (4.2.6) 24 | activesupport (= 4.2.6) 25 | globalid (>= 0.3.0) 26 | activemodel (4.2.6) 27 | activesupport (= 4.2.6) 28 | builder (~> 3.1) 29 | activerecord (4.2.6) 30 | activemodel (= 4.2.6) 31 | activesupport (= 4.2.6) 32 | arel (~> 6.0) 33 | activesupport (4.2.6) 34 | i18n (~> 0.7) 35 | json (~> 1.7, >= 1.7.7) 36 | minitest (~> 5.1) 37 | thread_safe (~> 0.3, >= 0.3.4) 38 | tzinfo (~> 1.1) 39 | annotate (2.6.5) 40 | activerecord (>= 2.3.0) 41 | rake (>= 0.8.7) 42 | arel (6.0.3) 43 | aws-sdk (2.2.31) 44 | aws-sdk-resources (= 2.2.31) 45 | aws-sdk-core (2.2.31) 46 | jmespath (~> 1.0) 47 | aws-sdk-resources (2.2.31) 48 | aws-sdk-core (= 2.2.31) 49 | bcrypt (3.1.11) 50 | better_errors (2.1.1) 51 | coderay (>= 1.0.0) 52 | erubis (>= 2.6.6) 53 | rack (>= 0.9.0) 54 | binding_of_caller (0.7.2) 55 | debug_inspector (>= 0.0.1) 56 | builder (3.2.2) 57 | byebug (8.2.5) 58 | climate_control (0.0.3) 59 | activesupport (>= 3.0) 60 | cocaine (0.5.8) 61 | climate_control (>= 0.0.3, < 1.0) 62 | coderay (1.1.1) 63 | coffee-rails (4.1.1) 64 | coffee-script (>= 2.2.0) 65 | railties (>= 4.0.0, < 5.1.x) 66 | coffee-script (2.4.1) 67 | coffee-script-source 68 | execjs 69 | coffee-script-source (1.10.0) 70 | concurrent-ruby (1.0.1) 71 | debug_inspector (0.0.2) 72 | erubis (2.7.0) 73 | execjs (2.6.0) 74 | faker (1.6.3) 75 | i18n (~> 0.5) 76 | figaro (1.1.1) 77 | thor (~> 0.14) 78 | globalid (0.3.6) 79 | activesupport (>= 4.1.0) 80 | i18n (0.7.0) 81 | jbuilder (2.4.1) 82 | activesupport (>= 3.0.0, < 5.1) 83 | multi_json (~> 1.2) 84 | jmespath (1.1.3) 85 | jquery-rails (4.1.1) 86 | rails-dom-testing (>= 1, < 3) 87 | railties (>= 4.2.0) 88 | thor (>= 0.14, < 2.0) 89 | json (1.8.3) 90 | loofah (2.0.3) 91 | nokogiri (>= 1.5.9) 92 | mail (2.6.4) 93 | mime-types (>= 1.16, < 4) 94 | method_source (0.8.2) 95 | mime-types (3.0) 96 | mime-types-data (~> 3.2015) 97 | mime-types-data (3.2016.0221) 98 | mimemagic (0.3.1) 99 | mini_portile2 (2.0.0) 100 | minitest (5.8.4) 101 | multi_json (1.11.3) 102 | nokogiri (1.6.7.2) 103 | mini_portile2 (~> 2.0.0.rc2) 104 | paperclip (5.0.0.beta1) 105 | activemodel (>= 4.2.0) 106 | activesupport (>= 4.2.0) 107 | cocaine (~> 0.5.5) 108 | mime-types 109 | mimemagic (~> 0.3.0) 110 | pg (0.18.4) 111 | pry (0.10.3) 112 | coderay (~> 1.1.0) 113 | method_source (~> 0.8.1) 114 | slop (~> 3.4) 115 | pry-rails (0.3.4) 116 | pry (>= 0.9.10) 117 | rack (1.6.4) 118 | rack-test (0.6.3) 119 | rack (>= 1.0) 120 | rails (4.2.6) 121 | actionmailer (= 4.2.6) 122 | actionpack (= 4.2.6) 123 | actionview (= 4.2.6) 124 | activejob (= 4.2.6) 125 | activemodel (= 4.2.6) 126 | activerecord (= 4.2.6) 127 | activesupport (= 4.2.6) 128 | bundler (>= 1.3.0, < 2.0) 129 | railties (= 4.2.6) 130 | sprockets-rails 131 | rails-deprecated_sanitizer (1.0.3) 132 | activesupport (>= 4.2.0.alpha) 133 | rails-dom-testing (1.0.7) 134 | activesupport (>= 4.2.0.beta, < 5.0) 135 | nokogiri (~> 1.6.0) 136 | rails-deprecated_sanitizer (>= 1.0.1) 137 | rails-html-sanitizer (1.0.3) 138 | loofah (~> 2.0) 139 | railties (4.2.6) 140 | actionpack (= 4.2.6) 141 | activesupport (= 4.2.6) 142 | rake (>= 0.8.7) 143 | thor (>= 0.18.1, < 2.0) 144 | rake (11.1.2) 145 | rdoc (4.2.2) 146 | json (~> 1.4) 147 | sass (3.4.22) 148 | sass-rails (5.0.4) 149 | railties (>= 4.0.0, < 5.0) 150 | sass (~> 3.1) 151 | sprockets (>= 2.8, < 4.0) 152 | sprockets-rails (>= 2.0, < 4.0) 153 | tilt (>= 1.1, < 3) 154 | sdoc (0.4.1) 155 | json (~> 1.7, >= 1.7.7) 156 | rdoc (~> 4.0) 157 | slop (3.6.0) 158 | spring (1.7.1) 159 | sprockets (3.6.0) 160 | concurrent-ruby (~> 1.0) 161 | rack (> 1, < 3) 162 | sprockets-rails (3.0.4) 163 | actionpack (>= 4.0) 164 | activesupport (>= 4.0) 165 | sprockets (>= 3.0.0) 166 | thor (0.19.1) 167 | thread_safe (0.3.5) 168 | tilt (2.0.2) 169 | turbolinks (2.5.3) 170 | coffee-rails 171 | tzinfo (1.2.2) 172 | thread_safe (~> 0.1) 173 | uglifier (3.0.0) 174 | execjs (>= 0.3.0, < 3) 175 | web-console (2.3.0) 176 | activemodel (>= 4.0) 177 | binding_of_caller (>= 0.7.2) 178 | railties (>= 4.0) 179 | sprockets-rails (>= 2.0, < 4.0) 180 | 181 | PLATFORMS 182 | ruby 183 | 184 | DEPENDENCIES 185 | annotate 186 | aws-sdk (>= 2.0) 187 | bcrypt (~> 3.1.7) 188 | better_errors 189 | binding_of_caller 190 | byebug 191 | coffee-rails (~> 4.1.0) 192 | faker 193 | figaro 194 | jbuilder (~> 2.0) 195 | jquery-rails 196 | paperclip (= 5.0.0.beta1) 197 | pg (~> 0.15) 198 | pry-rails 199 | rails (= 4.2.6) 200 | sass-rails (~> 5.0) 201 | sdoc (~> 0.4.0) 202 | spring 203 | turbolinks 204 | uglifier (>= 1.3.0) 205 | web-console (~> 2.0) 206 | 207 | BUNDLED WITH 208 | 1.11.2 209 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React File Upload Demo 2 | This demo shows how to upload images using React, Paperclip, and AWS S3. 3 | 4 | # Video Demo 5 | - [Part One (paperclip, aws)](https://vimeo.com/169111348) 6 | - [Part Two (uploading files via a form)](https://vimeo.com/169111248) 7 | 8 | ## Key Files 9 | - [application.rb](./config/application.rb) 10 | - [tweet.rb](./app/models/tweet.rb) 11 | - [_tweet.json.jbuilder](./app/views/api/tweets/_tweet.json.jbuilder) 12 | - [TweetApi.js](./frontend/utils/TweetApi.js) 13 | - [TweetForm.jsx](./frontend/components/TweetForm.jsx) 14 | 15 | ## Useful Docs 16 | - [Paperclip](https://github.com/thoughtbot/paperclip#paperclip) 17 | - [Figaro] (https://github.com/laserlemon/figaro#why-does-figaro-exist) 18 | - [AWS] (http://aws.amazon.com/) 19 | - [FileReader] (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) 20 | - [FormData] (https://developer.mozilla.org/en-US/docs/Web/API/FormData) 21 | 22 | ### Setting up AWS 23 | 24 | - The first thing we need to set up is our buckets. This is where amazon will actually store our files. Click on 'S3' and then 'Create Bucket'. We should make a separate bucket for development and production. I would use something like `app-name-dev`, and `app-name-pro`. Set the region to 'US Standard'. 25 | - Now we have space set aside on AWS, but we don't have permission to access it. We need to create a user, and a policy for them to access your buckets. Go back to the main page and click 'Identity and Access Managment' then click 'Users' on the left. We'll make a new user, named whatever you like. 26 | - You'll be directed to a page with your brand new security credentials, DOWNLOAD AND SAVE THEM NOW, you will not have access to them again. If you do lose them, just delete the user and make a new one. 27 | - The keys you just saved give you access to your AWS server space, **don't give push them to github, or put them anywhere public!** 28 | - Now we need to set up the security policy for our new user. This is how they will be allowed to connect. Click 'Inline Policies' and then create one, then choose 'Custom Policy'. You can use this sensible default and not worry too much about what it's doing for you (borrrrriing). Remember to switch out bucket-name for your bucket. 29 | 30 | ```json 31 | { 32 | "Version": "2012-10-17", 33 | "Statement": [ 34 | { 35 | "Sid": "Stmt1420751757000", 36 | "Effect": "Allow", 37 | "Action": [ 38 | "s3:*" 39 | ], 40 | "Resource": [ 41 | "arn:aws:s3:::BUCKET-NAME-DEV", 42 | "arn:aws:s3:::BUCKET-NAME-DEV/*", 43 | "arn:aws:s3:::BUCKET-NAME-PRO", 44 | "arn:aws:s3:::BUCKET-NAME-PRO/*" 45 | ] 46 | } 47 | ] 48 | } 49 | ``` 50 | - That's pretty much it for AWS. Now we have to convince paperclip to use it! 51 | 52 | ### Setting up Paperclip 53 | 54 | - ImageMagick is a dependency of paperclip. It is installed on the a/A machines but you will need to install it at home. `brew install imagemagick` 55 | - Add the gem of course `gem "paperclip", '~> 5.0.0'`. The video references the beta because it was the only version compatible with the latest version of AWS at the time it was filmed, but you should not need the beta anymore. 56 | - We need to create a migration to add the attached file columns. We'll add them to posts for the demo. `rails generate paperclip post image` 57 | - We also need to add code to the model to tell it how to handle attached files. Check the [Paperclip docs](https://github.com/thoughtbot/paperclip#paperclip) for more info! 58 | 59 | ```ruby 60 | class Post < ActiveRecord::Base 61 | has_attached_file :image, default_url: "missing.png" 62 | validates_attachment_content_type :image, content_type: /\Aimage\/.*\Z/ 63 | end 64 | ``` 65 | 66 | - Great, lastly we need to set up paperclip to save to AWS. Before we do this we need somewhere safe to store our secret access keys. Enter figaro! 67 | - Add `gem 'figaro'` and then run `bundle exec figaro install` 68 | - Figaro has created a new application.yml file and added it to your gitignore. All your secret app keys can be stored in this file, and we will reference them using syntax like `ENV["secret_key"]` throughout our app. 69 | - Be careful to save this file to your email or dropbox, because it will not be pushed to github. 70 | - Double check that application.yml is gitignored. **People will scrape github for S3 keys and exploit your account if they can.** 71 | - Now we can add our secret keys. It should look something like this. 72 | ```ruby 73 | 74 | # config/application.yml 75 | development: 76 | s3_bucket: "BUCKET-NAME-DEV" 77 | 78 | production: 79 | s3_bucket: "BUCKET-NAME-PRO" 80 | 81 | s3_region: "us-east-1" 82 | s3_access_key_id: "XXXX" 83 | s3_secret_access_key: "XXXX" 84 | ``` 85 | 86 | - Now that we have a safe way to access our secret keys, we need to update our application.rb file to configure paperclip to use s3. Let's add one more gem for this. `gem 'aws-sdk', '>= 2.0'` 87 | 88 | ```ruby 89 | # config/application.rb 90 | 91 | config.paperclip_defaults = { 92 | :storage => :s3, 93 | :s3_credentials => { 94 | :bucket => ENV["s3_bucket"], 95 | :access_key_id => ENV["s3_access_key_id"], 96 | :secret_access_key => ENV["s3_secret_access_key"], 97 | :s3_region => ENV["s3_region"] 98 | } 99 | } 100 | ``` 101 | - We did it! You should be able to attach files through the console, test it out. 102 | ```ruby 103 | post = Post.first 104 | file = File.open('app/assets/images/sennacy.jpg') 105 | post.image = file 106 | post.save! 107 | post.image.url #=> "http://s3.amazonaws.com/YOUR-BUCKET-NAME/something/images/000/000/607/sennacy.jpg?1459267299" 108 | ``` 109 | 110 | ### Image Preview 111 | - Okay so what if we don't want our users to upload files via rails console? We need to be able to attach files from a form. Lets add something to our post form. 112 | - To preview the file, we need to extract a url for it. On change of the file input component we instantiate a new [FileReader] 113 | (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) object. set a success function for when it loads 114 | Then we ask it to read the file `reader.readAsDataURL(file);` 115 | (https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL) 116 | ```javascript 117 | var reader = new FileReader(); 118 | var file = e.currentTarget.files[0]; 119 | reader.onloadend = function() { 120 | this.setState({ imageUrl: reader.result, imageFile: file}); 121 | }.bind(this); 122 | 123 | if (file) { 124 | reader.readAsDataURL(file); 125 | } else { 126 | this.setState({ imageUrl: "", imageFile: null }); 127 | } 128 | ``` 129 | - Once it's loaded we can preview the image using the imageUrl we saved in state. Awesome! 130 | 131 | ### Image Uploading 132 | - We still haven't sent the file to the server to be saved. To upload the file we will instantiate a new 133 | [FormData] (https://developer.mozilla.org/en-US/docs/Web/API/FormData) object. 134 | We then use the [append](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) 135 | method to add key/values to send to the server. One of the key/value pairs will be the binary 136 | file we grab from `this.state.file`. Be mindful to have your keys match whatever your Rails 137 | controller is expecting in the params. In our case this is `post[image]`. 138 | ```javascript 139 | var file = this.state.imageFile; 140 | 141 | var formData = new FormData(); 142 | formData.append("post[title]", title); 143 | formData.append("post[image]", file); 144 | 145 | ApiUtil.createPost(formData, this.resetForm); 146 | ``` 147 | 148 | We will use 149 | `ApiUtil.createPost()` to make the AJAX request and create an action on success. In the 150 | options for the `$.ajax` request we need to set `processData` and `contentType` both to 151 | `false`. This is to prevent default jQuery behaviour from trying to convert our FormData 152 | object and sending up the wrong header. See more in this [SO post](http://stackoverflow.com/a/8244082). 153 | 154 | ```javascript 155 | createPost: function(formData) { 156 | $.ajax({ 157 | url: '/api/posts', 158 | type: 'POST', 159 | processData: false, 160 | contentType: false, 161 | dataType: 'json', 162 | data: formData, 163 | success: function(post) { 164 | PostActions.receivePost(post); 165 | } 166 | }) 167 | } 168 | ``` 169 | 170 | ### Image Missing and Jbuilder 171 | - Once our images are saving successfully the last step is to display them when they are retrieved from the database. We can use the `post.image.url` method in our jbuilder template and then use that value as the src to an image tag. But we also need to remember to use the `asset_path` helper to make sure our path is set correctly. You'll probably end up with something like this. 172 | `json.image_url asset_path(post.image.url(:original))`. This will catch your default image url as well if it's in assets/images. 173 | 174 | ### Configuring for production 175 | - Last step, heroku won't have our application.yml (it's in our gitignore!) So we need to send up the keys. You can use this convenient figaro commend. 176 | ``` 177 | $ figaro heroku:set -e production 178 | ``` 179 | - Congrats! You can did it! 180 | --------------------------------------------------------------------------------