Image preview when pasting or adding images via selector

package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "autosize": "^3.0.8",
     "hangupsjs": "^1.3.2",
+    "mime-types": "^2.1.12",
     "moment": "^2.10.3",
     "node-notifier": "^4.2.3",
     "notr": "^1.1.2",

src/main.coffee

@@ -261,9 +261,8 @@ app.on 'ready', ->
 
     # we want to upload. in the order specified, with retry
     ipc.on 'uploadclipboardimage', seqreq (ev, spec) ->
-        {conv_id, client_generated_id} = spec
+        {pngData, conv_id, client_generated_id} = spec
         file = tmp.fileSync postfix: ".png"
-        pngData = clipboard.readImage().toPng()
         ipcsend 'uploadingimage', {conv_id, client_generated_id, path:file.name}
         Q.Promise (rs, rj) ->
             fs.writeFile file.name, pngData, plug(rs, rj)

src/ui/css/yakyak/applayout.less

@@ -22,6 +22,43 @@
             border-right: 1px solid var(--grey);
         }
     }
+    .dragover #drop-overlay {
+        display: block;
+    }
+
+    .dragover * {
+      pointer-events: none;
+    }
+
+    #drop-overlay {
+        z-index: 2;
+        top: 0;
+        left: 0;
+        display: none;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        text-align: center;
+        margin-top: auto;
+        background-color: rgba(119, 119, 119, .4);
+        font-size: 3em;
+        & div.inner-overlay {
+          top: ~"calc(var(--headerbarheight) * 1.5 / var(--zoom))";
+          height: 85%;
+          width: 85%;
+          display: table;
+          position: relative;
+          margin: auto auto;
+          border: 5px dashed rgba(100,100,100,1);
+          border-radius: 12px;
+          color: rgba(100,100,100,1);
+          div {
+            display: table-cell;
+            vertical-align: middle;
+          }
+        }
+    }
+
     > .leftresize {
         position: fixed;
         top: 0;
@@ -64,6 +101,7 @@
         }
     }
     > .right {
+        position: relative;
         flex: 1;
         display: flex;
         flex-direction: column;

src/ui/css/yakyak/input.less

@@ -1,20 +1,30 @@
 @button-container-width: 60px;
 
+@keyframes color_change {
+  from { color: rgba(119, 119, 119, .9); }
+  to { color: rgba(119, 119, 119, 1); }
+}
+
+@keyframes color_change_back {
+  from { color: rgba(119, 119, 119, 1); }
+  to { color: rgba(119, 119, 119, .9); }
+}
+
 .input {
     font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, "NotoColorEmoji";
     position: relative;
 
-    span.emoticon {
-        display: inline-block;
-        width: 30px;
-        height: 30px;
-        line-height: 30px;
-        font-size: 20px;
+    #preview-container {
+        padding-top: 1em;
+        background: var(--white);
+        width: 100%;
         text-align: center;
-        cursor: pointer;
-    }
-
-    > #emoji-container {
+        div.relative {
+            display: inline-block;
+            min-height: 5em;
+            min-width: 5em;
+        }
+        //
         position: absolute;
         z-index: 0;
         top: 0;
@@ -24,43 +34,101 @@
         &.open{
             transform: translate3d(0, -100%, 0);
         }
-        > #emoji-group-selector {
-            overflow-x: scroll;
-            border-bottom: 1px solid var(--lightgrey);
-            height: 33px;
-            margin-left: 5px;
-
-            > .emoticon {
-                height: 32px;
-                padding-bottom:2px;
+        //
+        .after:hover {
+          animation: color_change 1s;
+          color: rgba(119, 119, 119, 1);
+        }
+        .after {
+            animation: color_change_back 1s;
+            cursor: pointer;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            text-align: center;
+            color: rgba(119, 119, 119, .9);
+            span {
+                top: 50%;
+                position: relative;
+                font-size: 3em;
+                display: block;
+                transform: perspective(1px) translateY(-50%);
             }
-            > .emoticon.glow {
-                border-bottom: 2px solid var(--grey);
+        }
+        .close-preview {
+            position:absolute;
+            top: 0;
+            right: 0;
+            cursor: pointer;
+        }
+        img {
+          max-height:22em;
+        }
+    }
+
+    span.emoticon {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 20px;
+        text-align: center;
+        cursor: pointer;
+    }
 
+    div.relative {
+        position: relative;
+        > #emoji-container {
+            position: absolute;
+            z-index: 0;
+            top: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all .3s ease;
+            background: var(--white);
+            &.open{
+                transform: translate3d(0, -100%, 0);
             }
+            > #emoji-group-selector {
+                overflow-x: scroll;
+                border-bottom: 1px solid var(--lightgrey);
+                height: 33px;
+                margin-left: 5px;
 
-        }
+                > .emoticon {
+                    height: 32px;
+                    padding-bottom:2px;
+                }
+                > .emoticon.glow {
+                    border-bottom: 2px solid var(--grey);
 
-        > #emoji-group-selector::-webkit-scrollbar {
-            display: none;
-        }
-        > .emoji-selector {
-            height:131px;
-            overflow-y: scroll;
-            border-bottom: 1px solid var(--lightgrey);
-            width: 100%;
-            padding: 5px 2px 5px 5px;
+                }
+
+            }
 
-            > .group-content {
+            > #emoji-group-selector::-webkit-scrollbar {
                 display: none;
-                padding: none;
-                margin: none;
             }
-            > .group-content.visible {
-                display: block;
+            > .emoji-selector {
+                height:131px;
+                overflow-y: scroll;
+                border-bottom: 1px solid var(--lightgrey);
+                width: 100%;
+                padding: 5px 2px 5px 5px;
+
+                > .group-content {
+                    display: none;
+                    padding: none;
+                    margin: none;
+                }
+                > .group-content.visible {
+                    display: block;
+                }
             }
-        }
 
+        }
     }
 
     > div.input-container {
@@ -69,7 +137,7 @@
         background: var(--white);
         z-index: 1;
         position: relative;
-        height: 49px;
+        min-height: 49px;
         textarea {
             width: 100%;
             resize: vertical;

src/ui/dispatcher.coffee

@@ -2,6 +2,15 @@ Client = require 'hangupsjs'
 remote = require('electron').remote
 ipc    = require('electron').ipcRenderer
 
+
+fs = require('fs')
+mime = require('mime-types')
+
+clipboard = require('electron').clipboard
+nativeImage = require('electron').nativeImage
+
+{convertEmoji} = require './util'
+
 {entity, conv, viewstate, userinput, connection, convsettings, notify} = require './models'
 {throttle, later, isImg} = require './util'
 
@@ -176,30 +185,65 @@ handle 'uploadimage', (files) ->
     conv_id = viewstate.selectedConv
     # sense check that client is in good state
     return unless viewstate.state == viewstate.STATE_NORMAL and conv[conv_id]
-    # ship it
-    for file in files
-        # only images please
+    # if only one file is selected, then it shows as preview before sending
+    #  otherwise, it will upload all of them immediatly
+    if files.length == 1
+        file = files[0] # get first and only file
+        element = document.getElementById 'preview-img'
+        # show error message and return if is not an image
         unless isImg file.path
             [_, ext] = file.path.match(/.*(\.\w+)$/) ? []
             notr "Ignoring file of type #{ext}"
-            continue
-        # message for a placeholder
-        msg = userinput.buildChatMessage entity.self, 'uploading image…'
-        msg.uploadimage = true
-        {client_generated_id} = msg
-        # add a placeholder for the image
-        conv.addChatMessagePlaceholder entity.self.id, msg
-        # and begin upload
-        ipc.send 'uploadimage', {path:file.path, conv_id, client_generated_id}
+            return
+        # store image in preview-container and open it
+        #  I think it is better to embed than reference path as user should
+        #   see exactly what he is sending. (using the path would require
+        #   polling)
+        fs.readFile file.path, (err, original_data) ->
+            binaryImage = new Buffer(original_data, 'binary')
+            base64Image = binaryImage.toString('base64')
+            mimeType = mime.lookup file.path
+            element.src = 'data:' + mimeType + ';base64,' + base64Image
+            document.querySelector('#preview-container').classList.add('open')
+    else
+        for file in files
+            # only images please
+            unless isImg file.path
+                [_, ext] = file.path.match(/.*(\.\w+)$/) ? []
+                notr "Ignoring file of type #{ext}"
+                continue
+            # message for a placeholder
+            msg = userinput.buildChatMessage entity.self, 'uploading image…'
+            msg.uploadimage = true
+            {client_generated_id} = msg
+            # add a placeholder for the image
+            conv.addChatMessagePlaceholder entity.self.id, msg
+            # and begin upload
+            ipc.send 'uploadimage', {path:file.path, conv_id, client_generated_id}
 
 handle 'onpasteimage', ->
+    element = document.getElementById 'preview-img'
+    element.src = clipboard.readImage().toDataURL()
+    element.src = element.src.replace /image\/png/, 'image/gif'
+    document.querySelector('#preview-container').classList.add('open')
+
+handle 'uploadpreviewimage', ->
     conv_id = viewstate.selectedConv
     return unless conv_id
     msg = userinput.buildChatMessage entity.self, 'uploading image…'
     msg.uploadimage = true
     {client_generated_id} = msg
     conv.addChatMessagePlaceholder entity.self.id, msg
-    ipc.send 'uploadclipboardimage', {conv_id, client_generated_id}
+    # find preview element
+    element = document.getElementById 'preview-img'
+    # build image from what is on preview
+    pngData = element.src.replace /data:image\/(png|jpe?g|gif|svg);base64,/, ''
+    pngData = new Buffer(pngData, 'base64')
+    document.querySelector('#preview-container').classList.remove('open')
+    document.querySelector('#emoji-container').classList.remove('open')
+    element.src = ''
+    #
+    ipc.send 'uploadclipboardimage', {pngData, conv_id, client_generated_id}
 
 handle 'uploadingimage', (spec) ->
     # XXX this doesn't look very good because the image

src/ui/views/applayout.coffee

@@ -55,15 +55,26 @@ drag = do ->
         # this enables dragging at all
         ev.preventDefault()
         addClass closest(ev.target, 'dragtarget'), 'dragover'
+        removeClass closest(ev.target, 'dragtarget'), 'drag-timeout'
         ev.dataTransfer.dropEffect = 'copy'
         return false
 
     ondrop = (ev) ->
         ev.preventDefault()
+        removeClass closest(ev.target, 'dragtarget'), 'dragover'
+        removeClass closest(ev.target, 'dragtarget'), 'drag-timeout'
         action 'uploadimage', ev.dataTransfer.files
 
     ondragleave = (ev) ->
-        removeClass closest(ev.target, 'dragtarget'), 'dragover'
+        # it was firing the leave event while dragging, had to
+        #  use a timeout to check if it was a "real" event
+        #  by remaining out
+        addClass closest(ev.target, 'dragtarget'), 'drag-timeout'
+        setTimeout ->
+            if closest(ev.target, 'dragtarget').classList.contains('drag-timeout')
+                removeClass closest(ev.target, 'dragtarget'), 'dragover'
+                removeClass closest(ev.target, 'dragtarget'), 'drag-timeout'
+        , 200
 
     {ondragover, ondragenter, ondrop, ondragleave}
 
@@ -85,16 +96,18 @@ resize = do ->
 resizers =
     leftResize: (ev) -> action 'leftresize', (Math.max 90, ev.clientX)
 
-
 module.exports = exp = layout ->
     platform = if process.platform is 'darwin' then 'osx' else ''
-    div class:'applayout dragtarget ' + platform, drag, resize, ->
+    div class:'applayout ' + platform, resize, ->
         div class:'left', ->
             div class:'listhead', region('listhead')
             div class:'list', region('left')
             div class:'lfoot', region('lfoot')
         div class:'leftresize', 'data-resize':'leftResize'
-        div class:'right', ->
+        div class:'right dragtarget ', drag, ->
+            div id: 'drop-overlay', ->
+                div class: 'inner-overlay', () ->
+                    div 'Drop file here.'
             div class:'convhead', region('convhead')
             div class:'main', region('main'), onscroll: onScroll
             div class:'maininfo', region('maininfo')