feature: upload attachment #3

browser/css/style.css

@@ -305,8 +305,8 @@ button, button:focus {
   font-size: 17px;
   color: #555;
   padding: 15px 10px 10px 10px;
-  padding-right: 5%;
-  width: 95.8%;
+  padding-right: 8.5%;
+  width: 92.3%;
   word-wrap: break-word;
   height: 30px;
   border: 1px #aaa solid;
@@ -392,6 +392,18 @@ button, button:focus {
   opacity: 0.8;
 }
 
+.open-emoji, .open-emoji:focus, .send-attachment, .send-attachment:focus {
+  background: none;
+  position: absolute;
+  font-size: 25px;
+  bottom: 40px;
+  opacity: 0.5;
+}
+
+ .send-attachment {
+   left: 90.5%;
+ }
+
 /**********************************
 EMOJIS
 ***********************************/
@@ -406,13 +418,8 @@ EMOJIS
   }
 }
 
-.open-emoji, .open-emoji:focus {
-  background: none;
-  position: absolute;
+.open-emoji {
   left: 93%;
-  font-size: 25px;
-  bottom: 40px;
-  opacity: 0.5;
 }
 
 .emojis {

browser/index.html

@@ -37,6 +37,10 @@
             <textarea placeholder="type message here"></textarea>
           </form>
         </div>
+        <button class="send-attachment">
+          <img src="img/attachment.png" width="20px">
+        </button>
+        <input type="file" accept="image/jpeg,image/jpg" class="file-input hide">
         <button class="open-emoji" no-js on-click-toggle-class=".emojis hide">
           <img src="img/smiley.png" width="20px">
         </button>

browser/js/funcs.js

@@ -107,6 +107,21 @@ function addSubmitHandler (chat_) {
   }
 }
 
+function sendAttachment(filePath, chat_) {
+  var recipients = chat_.accounts.map((account) => account.id)
+  ipcRenderer.send('upload', { filePath, recipients, isNewChat: !chat_.id })
+}
+
+function addAttachmentSender(chat_) {
+  document.querySelector('.send-attachment').onclick = () => {
+    const fileInput = document.querySelector('.file-input');
+    fileInput.click();
+    fileInput.onchange = () => {
+      sendAttachment(fileInput.files[0].path, chat_);
+    }
+  }
+}
+
 function addNotification (el, chat_) {
   if (chat_.items[0]._params.accountId == window.loggedInUserId) {
     return

browser/js/renderers.js

@@ -229,6 +229,7 @@ function renderChat (chat_) {
   scrollToChatBottom();
 
   addSubmitHandler(chat_);
+  addAttachmentSender(chat_);
   document.querySelector(MSG_INPUT_SELECTOR).focus();
 }
 

instagram.js

@@ -65,6 +65,16 @@ exports.searchUsers = function (session, search) {
   })
 }
 
+exports.uploadFile = function (session, filePath, recipients) {
+  return new Promise((resolve, reject) => {
+    Client.Upload.photo(session, filePath)
+      .then(function (upload) {
+        Client.Thread.configurePhoto(session, recipients, upload.params.uploadId)
+          .then(resolve).catch(reject);
+      }).catch(reject);
+  })
+}
+
 exports.seen = function (session, thread) {
   (new Client.Thread(session, thread)).seen()
 }

main.js

@@ -144,6 +144,13 @@ electron.ipcMain.on('message', (evt, data) => {
   }
 })
 
+electron.ipcMain.on('upload', (evt, data) => {
+  instagram.uploadFile(session, data.filePath, data.recipients)
+    .then((chat) => {
+      if (data.isNewChat) getChat(null, chat[0].id)
+    })
+})
+
 electron.ipcMain.on('searchUsers', (evt, search) => {
   instagram.searchUsers(session, search).then((users) => {
     mainWindow.webContents.send('searchResult', users);