Add Trix editor + file uploads

.gitignore

@@ -19,4 +19,5 @@
 .byebug_history
 /public/packs
 /public/packs-test
+/public/uploads
 /node_modules

Gemfile

@@ -63,4 +63,7 @@ gem 'jquery-rails', '~> 4.3.1'
 gem 'bootstrap', '~> 4.0.0.beta'
 gem 'webpacker', '~> 3.0'
 gem 'sidekiq', '~> 5.0'
-gem 'foreman', '~> 0.84.0'
+gem 'foreman', '~> 0.84.0'
+
+gem 'trix'
+gem 'shrine'

Gemfile.lock

@@ -105,6 +105,7 @@ GEM
     devise_masquerade (0.6.1)
       devise (>= 2.1.0)
       railties (>= 3.0)
+    down (4.0.1)
     erubi (1.6.1)
     execjs (2.7.0)
     ffi (1.9.18)
@@ -216,6 +217,8 @@ GEM
     selenium-webdriver (3.6.0)
       childprocess (~> 0.5)
       rubyzip (~> 1.0)
+    shrine (2.6.1)
+      down (>= 2.3.6)
     sidekiq (5.0.5)
       concurrent-ruby (~> 1.0)
       connection_pool (~> 2.2, >= 2.2.0)
@@ -236,6 +239,8 @@ GEM
     thor (0.19.4)
     thread_safe (0.3.6)
     tilt (2.0.8)
+    trix (0.11.0)
+      rails (> 4.1, < 5.2)
     turbolinks (5.0.1)
       turbolinks-source (~> 5)
     turbolinks-source (5.0.3)
@@ -283,9 +288,11 @@ DEPENDENCIES
   rails (~> 5.1.4)
   sass-rails (~> 5.0)
   selenium-webdriver
+  shrine
   sidekiq (~> 5.0)
   spring
   spring-watcher-listen (~> 2.0.0)
+  trix
   turbolinks (~> 5)
   tzinfo-data
   uglifier (>= 1.3.0)

app/assets/javascripts/application.js

@@ -15,4 +15,5 @@
 //= require popper
 //= require bootstrap
 //= require turbolinks
+//= require trix
 //= require_tree .

app/assets/javascripts/photos.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/posts.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/trix_uploads.js

@@ -0,0 +1,45 @@
+// Turn off the default Trix captions
+Trix.config.attachments.preview.caption = {
+  name: false,
+  size: false
+};
+
+function uploadAttachment(attachment) {
+  // Create our form data to submit
+  var file = attachment.file;
+  var form = new FormData;
+  form.append("Content-Type", file.type);
+  form.append("photo[image]", file);
+
+  // Create our XHR request
+  var xhr = new XMLHttpRequest;
+  xhr.open("POST", "/photos.json", true);
+  xhr.setRequestHeader("X-CSRF-Token", Rails.csrfToken());
+
+  // Report file uploads back to Trix
+  xhr.upload.onprogress = function(event) {
+    var progress = event.loaded / event.total * 100;
+    attachment.setUploadProgress(progress);
+  }
+
+  // Tell Trix what url and href to use on successful upload
+  xhr.onload = function() {
+    if (xhr.status === 201) {
+      var data = JSON.parse(xhr.responseText);
+      return attachment.setAttributes({
+        url: data.image_url,
+        href: data.url
+      })
+    }
+  }
+
+  return xhr.send(form);
+}
+
+// Listen for the Trix attachment event to trigger upload
+document.addEventListener("trix-attachment-add", function(event) {
+  var attachment = event.attachment;
+  if (attachment.file) {
+    return uploadAttachment(attachment);
+  }
+});

app/assets/stylesheets/application.scss

@@ -1,3 +1,5 @@
+//*= require trix
+
 // $navbar-default-bg: #312312;
 // $light-orange: #ff8c00;
 // $navbar-default-color: $light-orange;

app/assets/stylesheets/photos.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the Photos controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/posts.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the Posts controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/scaffolds.scss

@@ -0,0 +1,84 @@
+body {
+  background-color: #fff;
+  color: #333;
+  margin: 33px;
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a {
+  color: #000;
+
+  &:visited {
+    color: #666;
+  }
+
+  &:hover {
+    color: #fff;
+    background-color: #000;
+  }
+}
+
+th {
+  padding-bottom: 5px;
+}
+
+td {
+  padding: 0 5px 7px;
+}
+
+div {
+  &.field, &.actions {
+    margin-bottom: 10px;
+  }
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px 7px 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+
+  h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px -7px 0;
+    background-color: #c00;
+    color: #fff;
+  }
+
+  ul li {
+    font-size: 12px;
+    list-style: square;
+  }
+}
+
+label {
+  display: block;
+}

app/controllers/photos_controller.rb

@@ -0,0 +1,74 @@
+class PhotosController < ApplicationController
+  before_action :set_photo, only: [:show, :edit, :update, :destroy]
+
+  # GET /photos
+  # GET /photos.json
+  def index
+    @photos = Photo.all
+  end
+
+  # GET /photos/1
+  # GET /photos/1.json
+  def show
+  end
+
+  # GET /photos/new
+  def new
+    @photo = Photo.new
+  end
+
+  # GET /photos/1/edit
+  def edit
+  end
+
+  # POST /photos
+  # POST /photos.json
+  def create
+    @photo = Photo.new(photo_params)
+
+    respond_to do |format|
+      if @photo.save
+        format.html { redirect_to @photo, notice: 'Photo was successfully created.' }
+        format.json { render :show, status: :created, location: @photo }
+      else
+        format.html { render :new }
+        format.json { render json: @photo.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /photos/1
+  # PATCH/PUT /photos/1.json
+  def update
+    respond_to do |format|
+      if @photo.update(photo_params)
+        format.html { redirect_to @photo, notice: 'Photo was successfully updated.' }
+        format.json { render :show, status: :ok, location: @photo }
+      else
+        format.html { render :edit }
+        format.json { render json: @photo.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /photos/1
+  # DELETE /photos/1.json
+  def destroy
+    @photo.destroy
+    respond_to do |format|
+      format.html { redirect_to photos_url, notice: 'Photo was successfully destroyed.' }
+      format.json { head :no_content }
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_photo
+      @photo = Photo.find(params[:id])
+    end
+
+    # Never trust parameters from the scary internet, only allow the white list through.
+    def photo_params
+      params.require(:photo).permit(:image)
+    end
+end

app/controllers/posts_controller.rb

@@ -0,0 +1,74 @@
+class PostsController < ApplicationController
+  before_action :set_post, only: [:show, :edit, :update, :destroy]
+
+  # GET /posts
+  # GET /posts.json
+  def index
+    @posts = Post.all
+  end
+
+  # GET /posts/1
+  # GET /posts/1.json
+  def show
+  end
+
+  # GET /posts/new
+  def new
+    @post = Post.new
+  end
+
+  # GET /posts/1/edit
+  def edit
+  end
+
+  # POST /posts
+  # POST /posts.json
+  def create
+    @post = Post.new(post_params)
+
+    respond_to do |format|
+      if @post.save
+        format.html { redirect_to @post, notice: 'Post was successfully created.' }
+        format.json { render :show, status: :created, location: @post }
+      else
+        format.html { render :new }
+        format.json { render json: @post.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /posts/1
+  # PATCH/PUT /posts/1.json
+  def update
+    respond_to do |format|
+      if @post.update(post_params)
+        format.html { redirect_to @post, notice: 'Post was successfully updated.' }
+        format.json { render :show, status: :ok, location: @post }
+      else
+        format.html { render :edit }
+        format.json { render json: @post.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /posts/1
+  # DELETE /posts/1.json
+  def destroy
+    @post.destroy
+    respond_to do |format|
+      format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' }
+      format.json { head :no_content }
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_post
+      @post = Post.find(params[:id])
+    end
+
+    # Never trust parameters from the scary internet, only allow the white list through.
+    def post_params
+      params.require(:post).permit(:title, :body)
+    end
+end

app/helpers/photos_helper.rb

@@ -0,0 +1,2 @@
+module PhotosHelper
+end

app/helpers/posts_helper.rb

@@ -0,0 +1,2 @@
+module PostsHelper
+end

app/models/image_uploader.rb

@@ -0,0 +1,2 @@
+class ImageUploader < Shrine
+end

app/models/photo.rb

@@ -0,0 +1,3 @@
+class Photo < ApplicationRecord
+  include ImageUploader[:image]
+end

app/models/post.rb

@@ -0,0 +1,2 @@
+class Post < ApplicationRecord
+end