diff --git a/src/css/style.css b/src/css/style.css
index 141fdaaf..0f8cc065 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -202,6 +202,10 @@ header #back-button {
   max-width: 75%;
 }
 
+.msg-content img {
+  border-radius: 3px;
+}
+
 .emoji {
   font-size: 1.3em;
   line-height: 1em;
@@ -375,6 +379,16 @@ header #back-button {
   font-size: 35px !important;
 }
 
+#attachment-preview {
+  display: none;
+  text-align: center;
+  overflow: hidden;
+}
+
+#attachment-preview img {
+  max-height: 60vh;
+}
+
 #message-list {
   display: flex;
   max-width: 700px;
diff --git a/src/index.html b/src/index.html
index 6bb30744..4c087dd9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -120,6 +120,7 @@
       <!-- Chat view -->
       <div class="main-view" id="message-view">
         <div id="message-list"></div>
+        <div id="attachment-preview"></div>
       </div>
       <div id="not-seen-by-them" style="display: none">
         <p>If the other person doesn't see your message, you can give them <b>your</b> chat link through some other channel:</p>
@@ -127,8 +128,9 @@
       </div>
       <div class="message-form" style="display:none">
         <form autocomplete="off">
+          <input name="attachment-input" type="file" class="hidden" id="attachment-input" accept="image/*" multiple>
           <button type="button" id="attach-file">
-            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.586 10.461l-10.05 10.075c-1.95 1.949-5.122 1.949-7.071 0s-1.95-5.122 0-7.072l10.628-10.585c1.17-1.17 3.073-1.17 4.243 0 1.169 1.17 1.17 3.072 0 4.242l-8.507 8.464c-.39.39-1.024.39-1.414 0s-.39-1.024 0-1.414l7.093-7.05-1.415-1.414-7.093 7.049c-1.172 1.172-1.171 3.073 0 4.244s3.071 1.171 4.242 0l8.507-8.464c.977-.977 1.464-2.256 1.464-3.536 0-2.769-2.246-4.999-5-4.999-1.28 0-2.559.488-3.536 1.465l-10.627 10.583c-1.366 1.368-2.05 3.159-2.05 4.951 0 3.863 3.13 7 7 7 1.792 0 3.583-.684 4.95-2.05l10.05-10.075-1.414-1.414z"/></svg>
           </button>
           <button type="button" id="emoji-picker">
             <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>
diff --git a/src/js/app.js b/src/js/app.js
index 2ff2ed95..eaea50da 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -327,6 +327,28 @@ if (!iris.util.isMobile) {
   });
 }
 
+
+$('#attach-file').click(event => {
+  event.preventDefault();
+  $('#attachment-input').click();
+})
+$('#attachment-input').change(e => {
+  $('#attachment-preview').empty();
+  var files = $('#attachment-input')[0].files;
+  if (files) {
+    $('#attachment-preview').show();
+    $('#message-list').hide();
+    for (var i = 0;i < files.length;i++) {
+      getBase64(files[i]).then(base64 => {
+        chats[activeChat].attachments = chats[activeChat].attachments || [];
+        chats[activeChat].attachments.push({type: 'image', data: base64});
+        var preview = $('<img>').attr('src', base64);
+        $('#attachment-preview').append(preview);
+      });
+    }
+  }
+});
+
 $('#desktop-application-about').toggle(!iris.util.isMobile && !iris.util.isElectron);
 
 $('#paste-chat-link').on('input', event => {
@@ -963,9 +985,16 @@ function showChat(pub) {
     event.preventDefault();
     chats[pub].msgDraft = null;
     var text = $('#new-msg').val();
-    if (!text.length) { return; }
+    if (!text.length && !chats[pub].attachments) { return; }
     chats[pub].setTyping(false);
-    chats[pub].send(text);
+    var msg = {text};
+    if (chats[pub].attachments) {
+      msg.attachments = chats[pub].attachments;
+    }
+    chats[pub].send(msg);
+    chats[pub].attachments = null;
+    $('#attachment-preview').hide();
+    $('#message-list').show();
     $('#new-msg').val('');
   });
   changeChatUnseenCount(pub, 0);
@@ -1045,6 +1074,14 @@ function addMessage(msg, chatId) {
     '<div class="msg-content"><div class="time">' + iris.util.formatTime(msg.time) + seenHtml + '</div></div>'
   );
   msgContent.prepend(textEl);
+  if (msg.attachments) {
+    msg.attachments.forEach(a => {
+      if (a.type.indexOf('image') === 0 && a.data) {
+        var img = $('<img>').attr('src', a.data);
+        msgContent.prepend(img);
+      }
+    })
+  }
   if (chats[chatId].uuid && !msg.info.selfAuthored) {
     var profile = chats[chatId].participantProfiles[msg.info.from];
     var name = profile && profile.name;