[feat] upload files

Co-authored-by: szdytom < szdytom@163.com >

public/index.html

@@ -13,13 +13,14 @@
 
     <textarea id="send" placeholder="Say something or run a command..." spellcheck="false"></textarea>
     <div class="top-box">
-        <button class="send-button" onclick="clear_message()">Clear</button>
+        <button class="send-button" id="clear-button">Clear</button>
         <p class="note"><input id="scroll-option" type="checkbox" checked /> Enable auto scroll</p>
         <p class="note">Version: SOCKET.IO-2.2</p>
     </div>
     <div class="bottom-box">
         <span class="note">Press Ctrl + Enter to send </span>
-        <button class="send-button" onclick="send()">Send</button>
+        <button class="send-button" id="uploader">Upload</button>
+        <button class="send-button" id="send-button">Send</button>
     </div>
 
     <div id="prompt-background" hidden></div>
@@ -30,6 +31,8 @@
             <input type="button" value="OK" id="confirm-prompt" />
         </div>
     </div>
+
+    <input type="file" id="real-uploader" hidden/>
 </body>
 
 </html>

public/script.js

@@ -16,6 +16,8 @@ let ws;
 let md;
 let unread_message = 0;
 
+let assets = [];
+
 $(() => {
     init().then(x => ws = x).catch(err => console.log(err))
 });
@@ -222,6 +224,23 @@ async function init() {
         });
     });
 
+    $('#clear-button').click(function() {
+        clear_message();
+    });
+
+    $('#send-button').click(async function() {
+        await send();
+    })
+
+    $('#uploader').click(function() {
+        $('#real-uploader').click();
+    });
+
+    $('#real-uploader').change(async function() {
+        const content = await upload(this.files[0]);
+        $('#send').val($('#send').val() + content);
+    });
+
     $('#send').focus();
 
     return ws;
@@ -249,27 +268,46 @@ function open_prompt(title) {
     return res;
 }
 
-async function get_url_query(query_name) {
+function get_url_query(query_name) {
-    return new Promise(resolve => {
+    var reg = new RegExp("(^|&)" + query_name + "=([^&]*)(&|$)", "i");
-        var reg = new RegExp("(^|&)" + query_name + "=([^&]*)(&|$)", "i");
+    var r = window.location.search.substr(1).match(reg);
-        var r = window.location.search.substr(1).match(reg);
+    var context = "";
-        var context = "";
+    if (r != null) {
-        if (r != null)
+        context = r[2];
-            context = r[2];
+    }
-        reg = null;
+    reg = null;
-        r = null;
+    r = null;
-        resolve(context == null || context == "" || context == "undefined" ? "" : context);
+    return context == null || context == "" || context == "undefined" ? "" : context;
-    });
 }
 
 async function login_name() {
-    username = await get_url_query("name")
+    username = get_url_query("name");
 
     if (username === undefined || username.length == 0) {
         username = await open_prompt('[Login] Input your name');
     }
 }
 
+function encode_file(file) {
+    return new Promise((resolve,) => {
+        let reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = (e) => {
+            resolve(e.target.result);
+        };
+    });
+}
+
+async function upload(file) {
+    const dataurl = await encode_file(file);
+    const id = assets.length;
+    assets.push(dataurl);
+    if (file.type.startsWith('image/')) {
+        return `![](%asset${id})`;
+    }
+    return `[](%asset${id})`;
+}
+
 async function send() {
     let data = $('#send').val();
     if (data === '') {
@@ -287,6 +325,11 @@ async function send() {
         last_command = data;
     }
 
+    for (let i in assets) {
+        data = data.replaceAll(`%asset${i}`, assets[i]);
+    }
+    assets = [];
+
     if (data.startsWith('/su')) {
         // a administrator login command.
         // now ask for passcode