file upload UI, get list of all images

velconnect/routes/api.py

@@ -394,3 +394,23 @@ async def get_all_files():
     for f in data:
         parse_data(f)
     return data
+
+
+@router.get("/get_all_images")
+async def get_all_images():
+    data = db.query("""
+        SELECT * 
+        FROM `DataBlock`
+        WHERE visibility='public' AND category='file';  
+        """)
+    data = [dict(f) for f in data]
+    for f in data:
+        parse_data(f)
+    images = []
+    for f in data:
+        if f['data']['filename'].endswith('.png') or f['data']['filename'].endswith('.jpg'):
+            images.append({
+                'key': f['id'],
+                'filename': f['data']['filename']
+            })
+    return images

velconnect/templates/index.html

@@ -161,6 +161,20 @@
                 </div>
 
 
+                <br>
+                <div class="tile tile-centered">
+                    <div class="tile-content">
+                        <div class="tile-title text-bold">Upload File</div>
+                        <input class="btn upload_file" type="file" id="upload_file">
+                        <button class="btn btn-primary btn-lg" id="upload_file_button">Upload
+                        </button>
+                    </div>
+                    <div class="tile-action">
+                    </div>
+                </div>
+                <br>
+
+
                 <br>
 
                 <div class="divider text-center" data-content="Room Settings"></div>
@@ -185,18 +199,18 @@
                     </div>
                 </div>
                 <br>
-                <div class="tile tile-centered">
+                <!--                <div class="tile tile-centered">-->
-                    <div class="tile-content">
+                <!--                    <div class="tile-content">-->
-                        <div class="tile-title text-bold">Carpet Color</div>
+                <!--                        <div class="tile-title text-bold">Carpet Color</div>-->
-                        <input class="btn carpet_color coloris" type="text" id="carpet_color" placeholder="#ffffff">
+                <!--                        <input class="btn carpet_color coloris" type="text" id="carpet_color" placeholder="#ffffff">-->
-                        <button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_carpet_color"
+                <!--                        <button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_carpet_color"-->
-                                data-tooltip="Set Carpet Color">Set
+                <!--                                data-tooltip="Set Carpet Color">Set-->
-                        </button>
+                <!--                        </button>-->
-                    </div>
+                <!--                    </div>-->
-                    <div class="tile-action">
+                <!--                    <div class="tile-action">-->
-                    </div>
+                <!--                    </div>-->
-                </div>
+                <!--                </div>-->
-                <br>
+                <!--                <br>-->
 
                 <div class="divider text-center" data-content="Screen Sharing"></div>
 
@@ -252,6 +266,7 @@
         let set_tv_url = document.getElementById('set_tv_url');
         let set_carpet_color = document.getElementById('set_carpet_color');
         let set_avatar_url = document.getElementById('set_avatar_url');
+        let upload_file_button = document.getElementById('upload_file_button');
 
 
         // check cookie
@@ -349,6 +364,18 @@
                     .catch(_ => console.log('fail'));
             }
 
+
+            function uploadFile(file) {
+                let formData = new FormData();
+                formData.append("file", file);
+                fetch('/api/upload_file', {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(_ => console.log('success'))
+                    .catch(_ => console.log('fail'));
+            }
+
             if (set_room_id) {
                 set_room_id.addEventListener('click', () => {
                     setDeviceField({"current_room": current_room.value});
@@ -379,6 +406,11 @@
                     setDeviceData({"avatar_url": document.getElementById('avatar_url').value});
                 });
             }
+            if (upload_file_button) {
+                upload_file_button.addEventListener('click', () => {
+                    uploadFile(document.getElementById('upload_file').files[0]);
+                });
+            }
 
         } else {
             window.location.href = "/pair";

velconnect/templates/pair.html

@@ -92,9 +92,8 @@
                     window.location.href = "/failure?code=1";
                     console.error(resp);
                 } else {
-                    let respData = JSON.parse(resp);
+                    if (resp['hw_id'] !== '') {
-                    if (respData['hw_id'] !== '') {
+                        setCookie('hw_id', resp['hw_id'], 60);
-                        setCookie('hw_id', respData['hw_id'], 60);
                         window.location.href = "/";
                     }
                 }