Show file upload dropdown

mduvall · Sep 25, 2013 · e94b149 · e94b149
1 parent d79953b
commit e94b149
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/css/menu.css b/css/menu.css
@@ -60,6 +60,19 @@
   }
 }
 
+.g-body .pos-abs {
+  position: absolute;
+}
+
+.g-body .file-hidden {
+  opacity: 0;
+  width: 90px;
+}
+
+.g-body .file-label {
+  width: 90px;
+}
+
 .g-body .text-menu {
   -webkit-transition: opacity 180ms, margin 180ms;
   -ms-transition: opacity 180ms, margin 180ms;

diff --git a/js/grande.js b/js/grande.js
@@ -57,7 +57,8 @@
         </div>",
         imageTooltipTemplate = document.createElement("div");
 
-    imageTooltipTemplate.innerHTML = "<div>Insert image</div>";
+    imageTooltipTemplate.innerHTML = "<div class='pos-abs file-label'>Insert image</div> \
+                                        <input class='file-hidden pos-abs' type='file' id='files' name='files[]' accept='image/*' multiple/>";
     imageTooltipTemplate.className = "image-tooltip hide";
 
     div.className = "text-menu hide";
@@ -110,6 +111,8 @@
     urlInput.onblur = triggerUrlBlur;
     urlInput.onkeydown = triggerUrlSet;
 
+    imageTooltip.onmousedown = triggerFileUpload;
+
     for (i = 0, len = editableNodes.length; i < len; i++) {
       node = editableNodes[i];
       node.contentEditable = true;
@@ -121,6 +124,10 @@
     toggleImageTooltip(event, event.target);
   }
 
+  function triggerFileUpload(event) {
+    var fileInput = imageTooltip.querySelectorAll('input')[0];
+  }
+
   function toggleImageTooltip(event, element) {
     var editNode = editableNodes[0],
         childrenNodes = editNode.children,