Fix image upload dialog for signatures

program/js/editor.js

@@ -669,10 +669,12 @@ function rcube_text_editor(config, id)
 
     dialog = $('#image-selector');
 
-    if (form.length)
-      button = dialog.prepend(form).find('button,a.button')
-        .text(rcmail.get_label('add' + type))
-        .focus();
+    if (!form.length)
+      form = this.file_upload_form(rcmail.gui_objects.uploadform);
+
+    button = dialog.prepend(form).find('button,a.button')
+      .text(rcmail.get_label('add' + type))
+      .focus();
 
     // fill images list with available images
     for (i in rcmail.env.attachments) {
@@ -818,4 +820,27 @@ function rcube_text_editor(config, id)
         });
     }
   };
+
+  this.file_upload_form = function(clone_form)
+  {
+    var hint = clone_form ? $(clone_form).find('.hint').text() : '',
+      form = $('<form id="imageuploadform">').attr({method: 'post', enctype: 'multipart/form-data'});
+      file = $('<input>').attr({name: '_file[]', type: 'file', multiple: true, style: 'opacity:0;height:1px;width:1px'})
+        .change(function() { rcmail.upload_file(form, 'upload'); }),
+      wrapper = $('<div class="upload-form">')
+        .append($('<button>').attr({'class': 'btn btn-secondary attach', href: '#', onclick: "rcmail.upload_input('imageuploadform')"}));
+
+    if (hint)
+      wrapper.prepend($('<div class="hint">').text(hint));
+
+    // clone existing upload form
+    if (clone_form) {
+      file.attr('name', $('input[type="file"]', clone_form).attr('name'));
+      form.attr('action', $(clone_form).attr('action'));
+    }
+
+    form.append(file).append($('<input>').attr({type: 'hidden', name: '_token', value: rcmail.env.request_token}));
+
+    return wrapper.append(form);
+  };
 }

program/resources/tinymce/browser.css

@@ -35,6 +35,16 @@
 	font-size: 11px;
 }
 
+#image-selector .upload-form {
+	text-align: center;
+	margin-bottom: 1rem;
+}
+
+#image-selector .upload-form button {
+	padding: 4px 8px;
+	border: 1px solid #c0c0c0;
+}
+
 #image-selector-list {
 	overflow-x: hidden;
 	overflow-y: auto;

skins/elastic/styles/widgets/editor.less

@@ -108,7 +108,7 @@
             height: 100% !important;
             display: flex;
             align-items: center;
-            justify-content: end;
+            justify-content: flex-end; // just 'end' does not work in Chrome
 
             .mce-btn {
                 position: initial;
@@ -680,7 +680,7 @@ html.touch .mce-grid td {
         margin-left: 0;
         overflow-x: hidden;
         overflow-y: auto;
-        height: 18em;
+        height: 19.1em;
 
         li {
             padding: .25rem;
@@ -716,10 +716,8 @@ html.touch .mce-grid td {
                 margin: auto;
             }
         }
-    }
 
-    @media screen and (max-width: @screen-width-small) {
-        .attachmentslist {
+        html.layout-phone & {
             height: auto;
         }
     }