Add avatar uploading

public/index.html

@@ -825,7 +825,7 @@
                 if(online_status != 'no_connection' && this_chid != undefined){
                     if(type != 'regenerate'){
                         var textareaText = $("#send_textarea").val();
-                        $("#send_textarea").val('');
+                        $("#send_textarea").val('').trigger('input');
                         
                     }else{
                         var textareaText = "";
@@ -1704,7 +1704,38 @@
                     }
                 });
                 saveSettings();
+                highlightSelectedAvatar();
+            });
+            $(document).on('click', '#user_avatar_block .avatar_upload', function() {
+                $('#avatar_upload_file').click();
+            });
+            $('#avatar_upload_file').on('change', function(e) {
+                const file = e.target.files[0];
 
+                if (!file) {
+                  return;
+                }
+
+                const formData = new FormData($("#form_upload_avatar").get(0));
+
+                jQuery.ajax({
+                    type: 'POST', 
+                    url: '/uploaduseravatar', 
+                    data: formData,
+                    beforeSend: () => {},
+                    cache: false,
+                    contentType: false,
+                    processData: false, 
+                    success: function(data){
+                        if (data.path) {
+                            appendUserAvatar(data.path);
+                        }
+                    },
+                    error: (jqXHR, exception) => {},
+                });
+
+                // Will allow to select the same file twice in a row
+                $('#form_upload_avatar').trigger("reset");
             });
             $('#logo_block').click(function(event) {  
                 if(!bg_menu_toggle){
@@ -2431,7 +2462,7 @@
                     //console.log(getData.length);
                     for(var i = 0; i < getData.length; i++) {
                         //console.log(1);
-                        $("#user_avatar_block").append('<div imgfile="'+getData[i]+'" class=avatar><img src="User Avatars/'+getData[i]+'" width=60px height=120px></div>');
+                        appendUserAvatar(getData[i]);
                     }
                     //var aa = JSON.parse(getData[0]);
                     //const load_ch_coint = Object.getOwnPropertyNames(getData);
@@ -2440,6 +2471,16 @@
                 }
             }
 
+            function highlightSelectedAvatar() {
+                $("#user_avatar_block").find('.avatar').removeClass('selected');
+                $("#user_avatar_block").find(`.avatar[imgfile='${user_avatar}']`).addClass('selected');
+            }
+
+            function appendUserAvatar(name) {
+                const block = $("#user_avatar_block").append('<div imgfile="'+name+'" class=avatar><img src="User Avatars/'+name+'" width=60px height=120px></div>');
+                highlightSelectedAvatar();
+            }
+
             $(document).on('input', '#temp', function() {
                 temp = $(this).val();
                 if(isInt(temp)){
@@ -4019,7 +4060,13 @@
             <hr style="margin-bottom: 5px;">
             
             <h4>Your Avatar</h4><h5></h5>
-            <div id="user_avatar_block"></div>
+            <div id="user_avatar_block">
+                <div class="avatar_upload">+</div>
+            </div>
+
+            <form id="form_upload_avatar"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
+                <input type="file" id="avatar_upload_file" accept="image/png" name="avatar">
+            </form>
             <form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
                 <h4>Name</h4>
                 <input id="your_name" name="your_name" class="text_pole" maxlength="35" size="16" value="" autocomplete="off">

public/style.css

@@ -351,6 +351,11 @@ code {
 	
 }
 
+.avatar.selected img {
+    outline-style: solid;
+    outline-color: rgb(255 255 255 / 70%);
+    outline-width: 2px;
+}
 
 .mes_block{
     
@@ -1301,7 +1306,7 @@ width: 103px;
 	backdrop-filter: blur(50px);
 	-webkit-backdrop-filter: blur(50px);
     max-width:800px;
-    height: 83vh;
+    height: calc(100% - 40px);
     position: absolute;
     margin-left: auto;
     margin-right: auto;
@@ -1623,6 +1628,21 @@ select {
 	width: 60px;
     height: 60px;
 }
+#user_avatar_block .avatar_upload {
+    cursor: pointer;
+    width: 60px;
+    height: 60px;
+    background:rgba(100, 100, 100, 0.5);
+    backdrop-filter: blur(10px) brightness(0.3);
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+}
+#form_upload_avatar {
+    display: none !important;
+}
 #temp{
     margin-left: 10px;
     margin-bottom: 20px;

server.js

@@ -61,7 +61,7 @@ if (is_colab && process.env.googledrive == 2){
 const jsonParser = express.json({limit: '100mb'});
 const urlencodedParser = express.urlencoded({extended: true, limit: '100mb'});
 const baseRequestArgs = { headers: { "Content-Type": "application/json" } };
-const directories = { worlds: 'public/worlds/' };
+const directories = { worlds: 'public/worlds/', avatars: 'public/User Avatars' };
 
 // CSRF Protection //
 const doubleCsrf = require('csrf-csrf').doubleCsrf;
@@ -1278,6 +1278,22 @@ app.post('/editworldinfo', jsonParser, (request, response) => {
     return response.send({ ok: true });
 });
 
+app.post('/uploaduseravatar', urlencodedParser, async (request, response) => {
+    if(!request.file) return response.sendStatus(400);
+
+    try {
+        const pathToUpload = path.join('./uploads/' + request.file.filename);
+        const image = await sharp(pathToUpload).resize(400, 400).toFormat('png').toBuffer();
+        const filename = `${Date.now()}.png`;
+        const pathToNewFile = path.join(directories.avatars, filename);
+        fs.writeFileSync(pathToNewFile, image);
+        fs.rmSync(pathToUpload);
+        return response.send({ path: filename });
+    } catch (err) {
+        return response.status(400).send('Is not a valid image');
+    }
+});
+
 // ** REST CLIENT ASYNC WRAPPERS **
 function deleteAsync(url, args) {
     return new Promise((resolve, reject) => {