Image upload

Gemfile

@@ -21,6 +21,7 @@ gem 'turbolinks', '~> 5'
 gem 'jbuilder', '~> 2.5'
 gem 'redis', '~> 3.0'
 gem 'faraday'
+gem 'carrierwave', '~> 1.0'
 # gem 'bcrypt', '~> 3.1.7'
 
 # Use Capistrano for deployment

Gemfile.lock

@@ -55,6 +55,10 @@ GEM
       bundler (~> 1.2)
       thor (~> 0.18)
     byebug (9.0.6)
+    carrierwave (1.0.0)
+      activemodel (>= 4.0.0)
+      activesupport (>= 4.0.0)
+      mime-types (>= 1.16)
     code_analyzer (0.4.7)
       sexp_processor
     coderay (1.1.1)
@@ -221,6 +225,7 @@ DEPENDENCIES
   bullet
   bundler-audit
   byebug
+  carrierwave (~> 1.0)
   coffee-rails (~> 4.2)
   erb2haml
   faraday

app/assets/stylesheets/routes.scss

@@ -158,7 +158,7 @@
       z-index: 20;
       bottom: 0;
       left: 0;
-      padding: 0 40px 0 5px;
+      padding: 0 50px 0 5px;
       width: 100%;
       height: 44px;
       border-top: solid 1px rgba(255,255,255,0.1);
@@ -169,16 +169,16 @@
         display: block;
         position: absolute;
         overflow: hidden;
-        top: 5px;
-        right: 7px;
-        padding: 30px 0 0;
-        width: 30px;
+        top: 0;
+        right: 0;
+        padding: 44px 0 0;
+        width: 50px;
         height: 0;
 
         .fa {
           position: absolute;
-          top: 0;
-          left: 0;
+          top: 5px;
+          left: 7px;
           width: 30px;
           line-height: 30px;
           color: #444;
@@ -259,13 +259,25 @@
     position: relative;
     z-index: 0;
     display: inline-block;
-    padding: 16px;
     border-radius: 6px;
     min-width: 80%;
     color: #000;
     background: #fff;
     font-size: 16px;
     text-align: left;
     box-shadow: rgba(0,0,0,0.2) 0px 2px 1px 0px;
+
+    &-text {
+      padding: 16px;
+    }
+
+    &-image {
+      border-radius: 6px;
+      overflow: hidden;
+
+      img {
+        vertical-align: bottom;
+      }
+    }
   }
 }

app/controllers/messages_controller.rb

@@ -5,4 +5,9 @@ def index
       @room = Room.find_by(uuid: params[:uuid])
       @messages = Message.where(room: @room)
     end
+
+    def upload
+      @room = Room.find_by(uuid: params[:uuid])
+      @selfie = Selfie.create!(room: @room, image: [params[:image]])
+    end
 end

app/models/selfie.rb

@@ -0,0 +1,4 @@
+class Selfie < ApplicationRecord
+  belongs_to :room
+  mount_uploaders :image, SelfieUploader
+end

app/uploaders/selfie_uploader.rb

@@ -0,0 +1,7 @@
+class SelfieUploader < CarrierWave::Uploader::Base
+  storage :file
+
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+end

app/views/messages/upload.json.jbuilder

@@ -0,0 +1,2 @@
+json.room @room, :id, :uuid, :created_at
+json.selfie @selfie, :id, :image, :created_at

app/views/routes/_chatbox.html.erb

@@ -8,12 +8,27 @@ $(function() {
       messages: []
     },
     methods: {
-      post_text: function() {
+      post_text: function(evt) {
         room.text(this.new_message_text);
         this.new_message_text = '';
       },
-      post_image: function() {
+      post_image: function(evt) {
+        console.log(evt.target.files[0]);
         // room.image(this.new_message);
+        var fd = new FormData();
+        fd.append('uuid', this.room_uuid);
+        fd.append('image', evt.target.files[0]);
+        $.ajax({
+          url: '/messages/upload',
+          method: 'post',
+          data: fd,
+          dataType: 'json',
+          contentType: false,
+          processData: false
+        }).success(function(data) {
+          console.log('file upload', data);
+          room.image(data.selfie.image[0].url);
+        });
       },
       received: function(data) {
         this.messages.push(data.message);
@@ -64,6 +79,10 @@ $(function() {
     text: function(message, bot_flg) {
       console.log('cable.post', message);
       this.perform('post', { content: { text: message } , bot_flg: bot_flg, intent: 'text' });
+    },
+    image: function(message, bot_flg) {
+      console.log('cable.post', message);
+      this.perform('post', { content: { image_url: message } , bot_flg: bot_flg, intent: 'image' });
     }
   });
 

app/views/routes/map.html.erb

@@ -14,6 +14,11 @@
       <div class="message-body" v-if="message.intent === 'text'">
         <div class="message-body-text">{{message.content.text}}</div>
       </div>
+      <div class="message-body" v-if="message.intent === 'image'">
+        <div class="message-body-image">
+          <img v-bind:src="message.content.image_url" v-bind:alt="message.content.image_url">
+        </div>
+      </div>
       <div class="message-body" v-if="message.intent === 'builtin.intent.none'">
         <div class="message-body-text">Pardon me?</div>
       </div>
@@ -23,17 +28,17 @@
     </div>
   </div>
   <div class="chatbox-input">
-    <form action="" id="new_message_image" v-on:submit.prevent="post_image">
-      <label for="new_message_image" class="chatbox-input-file">
-        <i class="fa fa-camera"></i>
-        <input type="file" name="new_message_image" id="new_message_image" v-on:change="post_image">
-      </label>
-    </form>
-    <form action="" id="new_message_text" v-on:submit.prevent="post_text">
+    <form action="" id="new_message_form_text" v-on:submit.prevent="post_text">
       <div class="chatbox-input-text">
         <input type="text" name="new_message_text" id="new_message_text" v-model="new_message_text" placeholder="Start chatting...">
       </div>
     </form>
+    <form action="" id="new_message_form_image" enctype="multipart/form-data" v-on:submit.prevent="post_image">
+      <label for="new_message_image" class="chatbox-input-file">
+        <i class="fa fa-camera"></i>
+        <input type="file" accept="image/*" capture="camera" name="new_message_image" id="new_message_image" v-on:change="post_image">
+      </label>
+    </form>
   </div>
 </div>
 

config/routes.rb

@@ -5,4 +5,5 @@
   get  'routes/map/:uuid', to: 'routes#map', as: 'routes_map'
   post 'routes/create',    to: 'routes#create'
   get  'messages', to: 'messages#index', format: :json
+  post 'messages/upload', to: 'messages#upload', format: :json
 end

db/migrate/20170128233915_create_selfies.rb

@@ -0,0 +1,9 @@
+class CreateSelfies < ActiveRecord::Migration[5.0]
+  def change
+    create_table :selfies do |t|
+      t.integer :room_id, index: true
+      t.json :image
+      t.timestamps
+    end
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20170128134503) do
+ActiveRecord::Schema.define(version: 20170128233915) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -30,4 +30,12 @@
     t.datetime "updated_at", null: false
   end
 
+  create_table "selfies", force: :cascade do |t|
+    t.integer  "room_id"
+    t.json     "image"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["room_id"], name: "index_selfies_on_room_id", using: :btree
+  end
+
 end