diff --git a/templates/zephyr/compose.html b/templates/zephyr/compose.html
index 69d29d27d4..19db5c9313 100644
--- a/templates/zephyr/compose.html
+++ b/templates/zephyr/compose.html
@@ -49,6 +49,8 @@
                   </div>
                 </div>
                 <div id="below-compose-content">
+                  <input type="file" id="file_input" class="notvisible" multiple />
+                  <a class="message-control-button icon-vector-paper-clip notdisplayed" id="attach_files" href="#" title="Attach files"></a>
                   <span id="restore-draft" onclick="compose.restore_message();">Restore last draft?</span>
                   <span id="tab-enter-message">
                     <span id="sending-indicator">Sending...</span>
diff --git a/zephyr/static/js/compose.js b/zephyr/static/js/compose.js
index e5e50c1dff..28201c7d8e 100644
--- a/zephyr/static/js/compose.js
+++ b/zephyr/static/js/compose.js
@@ -532,6 +532,7 @@ $(function () {
     $("#new_message_content").autosize();
     $("#compose").filedrop({
         url: "json/upload_file",
+        fallback_id: "file_input",
         paramname: "file",
         maxfilesize: 25,
         data: {
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index df20a2564f..b0bbfab304 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -970,6 +970,23 @@ $(function () {
         }
     });
 
+    // Run a feature test and decide whether to display
+    // the "Attach files" button
+
+    if (window.XMLHttpRequest && (new XMLHttpRequest()).upload) {
+        $("#compose #attach_files").removeClass("notdisplayed");
+    }
+
+    // Event bindings for "Compose" pane
+
+    // Click event binding for "Attach files" button
+    // Triggers a click on a hidden file input field
+
+    $("#compose").on("click", "#attach_files", function (e) {
+        e.preventDefault();
+        $("#compose #file_input").trigger("click");
+    } );
+
     $("#subscriptions_table").on("mouseover", ".subscription_header", function (e) {
         $(this).addClass("active");
     });
diff --git a/zephyr/static/styles/fonts.css b/zephyr/static/styles/fonts.css
index e34ae6bac7..b8b917fdfd 100644
--- a/zephyr/static/styles/fonts.css
+++ b/zephyr/static/styles/fonts.css
@@ -270,4 +270,5 @@ ul.icons li [class*=" icon-vector-"] {
 /*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
     readers do not read off random characters that represent icons */
 .icon-vector-star:before                 { content: "\f005"; }
-.icon-vector-star-empty:before           { content: "\f006"; }
\ No newline at end of file
+.icon-vector-star-empty:before           { content: "\f006"; }
+.icon-vector-paper-clip:before           { content: "\f0c6"; }
\ No newline at end of file
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 94ad58910c..4d7e23bc7a 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -66,6 +66,17 @@ li, .table th, .table td {
     font-size: 140%;
 }
 
+/* Classes for hiding and showing controls */
+
+.notdisplayed {
+    display: none !important;
+}
+
+.notvisible {
+    visibility: hidden !important;
+    width: 0px !important;
+    height: 0px !important;
+}
 
 /* Inline and block code */
 
@@ -498,6 +509,7 @@ blockquote p {
     display: table-row;
     font-size: 80%;
     white-space: nowrap;
+    padding-top: 6px;
 }
 
 .messagebox p {
@@ -1148,3 +1160,19 @@ li.expanded_subject {
 #restore-draft:hover {
     cursor:  pointer;
 }
+
+#compose a.message-control-button {
+    display: inline-block;
+    color: #777;
+    text-decoration: none;
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    border-radius: 2px;
+    text-align: center;
+}
+
+#compose a.message-control-button:hover {
+    color: #000;
+}