Bumped to Bootstrap 5

src/core/static/css/bootstrap/bootstrap-datepicker.css

@@ -1,471 +0,0 @@
-/*!
- * Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
- *
- * Copyright 2012 Stefan Petre
- * Improvements by Andrew Rowls
- * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
- */
-.datepicker {
-  padding: 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  direction: ltr;
-}
-.datepicker-inline {
-  width: 220px;
-}
-.datepicker.datepicker-rtl {
-  direction: rtl;
-}
-.datepicker.datepicker-rtl table tr td span {
-  float: right;
-}
-.datepicker-dropdown {
-  top: 0;
-  left: 0;
-}
-.datepicker-dropdown:before {
-  content: '';
-  display: inline-block;
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #999;
-  border-top: 0;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  position: absolute;
-}
-.datepicker-dropdown:after {
-  content: '';
-  display: inline-block;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-top: 0;
-  position: absolute;
-}
-.datepicker-dropdown.datepicker-orient-left:before {
-  left: 6px;
-}
-.datepicker-dropdown.datepicker-orient-left:after {
-  left: 7px;
-}
-.datepicker-dropdown.datepicker-orient-right:before {
-  right: 6px;
-}
-.datepicker-dropdown.datepicker-orient-right:after {
-  right: 7px;
-}
-.datepicker-dropdown.datepicker-orient-bottom:before {
-  top: -7px;
-}
-.datepicker-dropdown.datepicker-orient-bottom:after {
-  top: -6px;
-}
-.datepicker-dropdown.datepicker-orient-top:before {
-  bottom: -7px;
-  border-bottom: 0;
-  border-top: 7px solid #999;
-}
-.datepicker-dropdown.datepicker-orient-top:after {
-  bottom: -6px;
-  border-bottom: 0;
-  border-top: 6px solid #fff;
-}
-.datepicker table {
-  margin: 0;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.datepicker td,
-.datepicker th {
-  text-align: center;
-  width: 20px;
-  height: 20px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  border: none;
-}
-.table-striped .datepicker table tr td,
-.table-striped .datepicker table tr th {
-  background-color: transparent;
-}
-.datepicker table tr td.day:hover,
-.datepicker table tr td.day.focused {
-  background: #eee;
-  cursor: pointer;
-}
-.datepicker table tr td.old,
-.datepicker table tr td.new {
-  color: #999;
-}
-.datepicker table tr td.disabled,
-.datepicker table tr td.disabled:hover {
-  background: none;
-  color: #999;
-  cursor: default;
-}
-.datepicker table tr td.highlighted {
-  background: #d9edf7;
-  border-radius: 0;
-}
-.datepicker table tr td.today,
-.datepicker table tr td.today:hover,
-.datepicker table tr td.today.disabled,
-.datepicker table tr td.today.disabled:hover {
-  background-color: #fde19a;
-  background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
-  background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
-  background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
-  background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
-  background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
-  border-color: #fdf59a #fdf59a #fbed50;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  color: #000;
-}
-.datepicker table tr td.today:hover,
-.datepicker table tr td.today:hover:hover,
-.datepicker table tr td.today.disabled:hover,
-.datepicker table tr td.today.disabled:hover:hover,
-.datepicker table tr td.today:active,
-.datepicker table tr td.today:hover:active,
-.datepicker table tr td.today.disabled:active,
-.datepicker table tr td.today.disabled:hover:active,
-.datepicker table tr td.today.active,
-.datepicker table tr td.today:hover.active,
-.datepicker table tr td.today.disabled.active,
-.datepicker table tr td.today.disabled:hover.active,
-.datepicker table tr td.today.disabled,
-.datepicker table tr td.today:hover.disabled,
-.datepicker table tr td.today.disabled.disabled,
-.datepicker table tr td.today.disabled:hover.disabled,
-.datepicker table tr td.today[disabled],
-.datepicker table tr td.today:hover[disabled],
-.datepicker table tr td.today.disabled[disabled],
-.datepicker table tr td.today.disabled:hover[disabled] {
-  background-color: #fdf59a;
-}
-.datepicker table tr td.today:active,
-.datepicker table tr td.today:hover:active,
-.datepicker table tr td.today.disabled:active,
-.datepicker table tr td.today.disabled:hover:active,
-.datepicker table tr td.today.active,
-.datepicker table tr td.today:hover.active,
-.datepicker table tr td.today.disabled.active,
-.datepicker table tr td.today.disabled:hover.active {
-  background-color: #fbf069 \9;
-}
-.datepicker table tr td.today:hover:hover {
-  color: #000;
-}
-.datepicker table tr td.today.active:hover {
-  color: #fff;
-}
-.datepicker table tr td.range,
-.datepicker table tr td.range:hover,
-.datepicker table tr td.range.disabled,
-.datepicker table tr td.range.disabled:hover {
-  background: #eee;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-}
-.datepicker table tr td.range.today,
-.datepicker table tr td.range.today:hover,
-.datepicker table tr td.range.today.disabled,
-.datepicker table tr td.range.today.disabled:hover {
-  background-color: #f3d17a;
-  background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
-  background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
-  background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
-  background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
-  background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
-  border-color: #f3e97a #f3e97a #edde34;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-}
-.datepicker table tr td.range.today:hover,
-.datepicker table tr td.range.today:hover:hover,
-.datepicker table tr td.range.today.disabled:hover,
-.datepicker table tr td.range.today.disabled:hover:hover,
-.datepicker table tr td.range.today:active,
-.datepicker table tr td.range.today:hover:active,
-.datepicker table tr td.range.today.disabled:active,
-.datepicker table tr td.range.today.disabled:hover:active,
-.datepicker table tr td.range.today.active,
-.datepicker table tr td.range.today:hover.active,
-.datepicker table tr td.range.today.disabled.active,
-.datepicker table tr td.range.today.disabled:hover.active,
-.datepicker table tr td.range.today.disabled,
-.datepicker table tr td.range.today:hover.disabled,
-.datepicker table tr td.range.today.disabled.disabled,
-.datepicker table tr td.range.today.disabled:hover.disabled,
-.datepicker table tr td.range.today[disabled],
-.datepicker table tr td.range.today:hover[disabled],
-.datepicker table tr td.range.today.disabled[disabled],
-.datepicker table tr td.range.today.disabled:hover[disabled] {
-  background-color: #f3e97a;
-}
-.datepicker table tr td.range.today:active,
-.datepicker table tr td.range.today:hover:active,
-.datepicker table tr td.range.today.disabled:active,
-.datepicker table tr td.range.today.disabled:hover:active,
-.datepicker table tr td.range.today.active,
-.datepicker table tr td.range.today:hover.active,
-.datepicker table tr td.range.today.disabled.active,
-.datepicker table tr td.range.today.disabled:hover.active {
-  background-color: #efe24b \9;
-}
-.datepicker table tr td.selected,
-.datepicker table tr td.selected:hover,
-.datepicker table tr td.selected.disabled,
-.datepicker table tr td.selected.disabled:hover {
-  background-color: #9e9e9e;
-  background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
-  background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
-  background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
-  background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
-  background-image: linear-gradient(to bottom, #b3b3b3, #808080);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
-  border-color: #808080 #808080 #595959;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-.datepicker table tr td.selected:hover,
-.datepicker table tr td.selected:hover:hover,
-.datepicker table tr td.selected.disabled:hover,
-.datepicker table tr td.selected.disabled:hover:hover,
-.datepicker table tr td.selected:active,
-.datepicker table tr td.selected:hover:active,
-.datepicker table tr td.selected.disabled:active,
-.datepicker table tr td.selected.disabled:hover:active,
-.datepicker table tr td.selected.active,
-.datepicker table tr td.selected:hover.active,
-.datepicker table tr td.selected.disabled.active,
-.datepicker table tr td.selected.disabled:hover.active,
-.datepicker table tr td.selected.disabled,
-.datepicker table tr td.selected:hover.disabled,
-.datepicker table tr td.selected.disabled.disabled,
-.datepicker table tr td.selected.disabled:hover.disabled,
-.datepicker table tr td.selected[disabled],
-.datepicker table tr td.selected:hover[disabled],
-.datepicker table tr td.selected.disabled[disabled],
-.datepicker table tr td.selected.disabled:hover[disabled] {
-  background-color: #808080;
-}
-.datepicker table tr td.selected:active,
-.datepicker table tr td.selected:hover:active,
-.datepicker table tr td.selected.disabled:active,
-.datepicker table tr td.selected.disabled:hover:active,
-.datepicker table tr td.selected.active,
-.datepicker table tr td.selected:hover.active,
-.datepicker table tr td.selected.disabled.active,
-.datepicker table tr td.selected.disabled:hover.active {
-  background-color: #666666 \9;
-}
-.datepicker table tr td.active,
-.datepicker table tr td.active:hover,
-.datepicker table tr td.active.disabled,
-.datepicker table tr td.active.disabled:hover {
-  background-color: #006dcc;
-  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
-  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: linear-gradient(to bottom, #08c, #0044cc);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
-  border-color: #0044cc #0044cc #002a80;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-.datepicker table tr td.active:hover,
-.datepicker table tr td.active:hover:hover,
-.datepicker table tr td.active.disabled:hover,
-.datepicker table tr td.active.disabled:hover:hover,
-.datepicker table tr td.active:active,
-.datepicker table tr td.active:hover:active,
-.datepicker table tr td.active.disabled:active,
-.datepicker table tr td.active.disabled:hover:active,
-.datepicker table tr td.active.active,
-.datepicker table tr td.active:hover.active,
-.datepicker table tr td.active.disabled.active,
-.datepicker table tr td.active.disabled:hover.active,
-.datepicker table tr td.active.disabled,
-.datepicker table tr td.active:hover.disabled,
-.datepicker table tr td.active.disabled.disabled,
-.datepicker table tr td.active.disabled:hover.disabled,
-.datepicker table tr td.active[disabled],
-.datepicker table tr td.active:hover[disabled],
-.datepicker table tr td.active.disabled[disabled],
-.datepicker table tr td.active.disabled:hover[disabled] {
-  background-color: #0044cc;
-}
-.datepicker table tr td.active:active,
-.datepicker table tr td.active:hover:active,
-.datepicker table tr td.active.disabled:active,
-.datepicker table tr td.active.disabled:hover:active,
-.datepicker table tr td.active.active,
-.datepicker table tr td.active:hover.active,
-.datepicker table tr td.active.disabled.active,
-.datepicker table tr td.active.disabled:hover.active {
-  background-color: #003399 \9;
-}
-.datepicker table tr td span {
-  display: block;
-  width: 23%;
-  height: 54px;
-  line-height: 54px;
-  float: left;
-  margin: 1%;
-  cursor: pointer;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.datepicker table tr td span:hover,
-.datepicker table tr td span.focused {
-  background: #eee;
-}
-.datepicker table tr td span.disabled,
-.datepicker table tr td span.disabled:hover {
-  background: none;
-  color: #999;
-  cursor: default;
-}
-.datepicker table tr td span.active,
-.datepicker table tr td span.active:hover,
-.datepicker table tr td span.active.disabled,
-.datepicker table tr td span.active.disabled:hover {
-  background-color: #006dcc;
-  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
-  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
-  background-image: linear-gradient(to bottom, #08c, #0044cc);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
-  border-color: #0044cc #0044cc #002a80;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-.datepicker table tr td span.active:hover,
-.datepicker table tr td span.active:hover:hover,
-.datepicker table tr td span.active.disabled:hover,
-.datepicker table tr td span.active.disabled:hover:hover,
-.datepicker table tr td span.active:active,
-.datepicker table tr td span.active:hover:active,
-.datepicker table tr td span.active.disabled:active,
-.datepicker table tr td span.active.disabled:hover:active,
-.datepicker table tr td span.active.active,
-.datepicker table tr td span.active:hover.active,
-.datepicker table tr td span.active.disabled.active,
-.datepicker table tr td span.active.disabled:hover.active,
-.datepicker table tr td span.active.disabled,
-.datepicker table tr td span.active:hover.disabled,
-.datepicker table tr td span.active.disabled.disabled,
-.datepicker table tr td span.active.disabled:hover.disabled,
-.datepicker table tr td span.active[disabled],
-.datepicker table tr td span.active:hover[disabled],
-.datepicker table tr td span.active.disabled[disabled],
-.datepicker table tr td span.active.disabled:hover[disabled] {
-  background-color: #0044cc;
-}
-.datepicker table tr td span.active:active,
-.datepicker table tr td span.active:hover:active,
-.datepicker table tr td span.active.disabled:active,
-.datepicker table tr td span.active.disabled:hover:active,
-.datepicker table tr td span.active.active,
-.datepicker table tr td span.active:hover.active,
-.datepicker table tr td span.active.disabled.active,
-.datepicker table tr td span.active.disabled:hover.active {
-  background-color: #003399 \9;
-}
-.datepicker table tr td span.old,
-.datepicker table tr td span.new {
-  color: #999;
-}
-.datepicker .datepicker-switch {
-  width: 145px;
-}
-.datepicker .datepicker-switch,
-.datepicker .prev,
-.datepicker .next,
-.datepicker tfoot tr th {
-  cursor: pointer;
-}
-.datepicker .datepicker-switch:hover,
-.datepicker .prev:hover,
-.datepicker .next:hover,
-.datepicker tfoot tr th:hover {
-  background: #eee;
-}
-.datepicker .cw {
-  font-size: 10px;
-  width: 12px;
-  padding: 0 2px 0 5px;
-  vertical-align: middle;
-}
-.input-append.date .add-on,
-.input-prepend.date .add-on {
-  cursor: pointer;
-}
-.input-append.date .add-on i,
-.input-prepend.date .add-on i {
-  margin-top: 3px;
-}
-.input-daterange input {
-  text-align: center;
-}
-.input-daterange input:first-child {
-  -webkit-border-radius: 3px 0 0 3px;
-  -moz-border-radius: 3px 0 0 3px;
-  border-radius: 3px 0 0 3px;
-}
-.input-daterange input:last-child {
-  -webkit-border-radius: 0 3px 3px 0;
-  -moz-border-radius: 0 3px 3px 0;
-  border-radius: 0 3px 3px 0;
-}
-.input-daterange .add-on {
-  display: inline-block;
-  width: auto;
-  min-width: 16px;
-  height: 18px;
-  padding: 4px 5px;
-  font-weight: normal;
-  line-height: 18px;
-  text-align: center;
-  text-shadow: 0 1px 0 #fff;
-  vertical-align: middle;
-  background-color: #eee;
-  border: 1px solid #ccc;
-  margin-left: -5px;
-  margin-right: -5px;
-}
-/*# sourceMappingURL=bootstrap-datepicker.css.map */

src/core/static/css/main.css

@@ -50,12 +50,16 @@
 
 
 
+.card-title-text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 
 .volume-control-positioner {
     position: absolute;
-    bottom: 2em;
+    bottom: 3.5em;
-    right: 50%;
+    right: 2.5%;
-    left: 50%;
 }
 
 .icon-style {

src/core/static/js/events.js

@@ -18,7 +18,7 @@ document.body.onload = (eve) => {
     setTimeout(function () {
         getFavesAjax();
         reloadDirectory();
-    }, 200);
+    }, 400);
 }
 
 

src/core/static/js/react-ui-logic.js

@@ -76,16 +76,16 @@ class FilesList extends React.Component {
             final.push(
                 <li class="col-sm-12 col-md-6 col-lg-4" title={name}>
                     <div class="card">
-                        <div class="card-header">
+                        <div class="card-header card-title-text">
                             {card_header}
                         </div>
                         <div class="card-body text-center noselect" title={name} hash={hash} ftype={filetype} onDoubleClick={this.openThis}>
                             {card_body}
                         </div>
                         <div class="card-footer">
-                            <a href={"api/file-manager-action/files/" + hash} download class="btn btn-secondary btn-sm float-left">Download</a>
+                            <a href={"api/file-manager-action/files/" + hash} download class="btn btn-dark btn-sm float-start">Download</a>
-                            <input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-secondary btn-sm float-left" type="button" value="Open Locally"/>
+                            <input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-dark btn-sm float-start" type="button" value="Open Locally"/>
-                            <input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/>
+                            <input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-dark btn-sm float-end" title={name} type="button" value="Open"/>
                         </div>
                     </div>
                 </li>

src/core/static/js/ui-logic.js

@@ -1,254 +1,208 @@
-const ipRegexWithPort = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]\:?)$/;
+const reloadDirectory = () => {
-const ipRegex         = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    const target = document.getElementById('refresh-btn');
+    const hash   = target.getAttribute("hash");
+    listFilesAjax(hash);
+}
+
+const goUpADirectory = () => {
+    const target = document.getElementById('back-btn')
+    const hash = target.getAttribute("hash");
+    listFilesAjax(hash);
+}
+
+const scrollFilesToTop = () => {
+    const target = document.getElementById('files');
+    target.scrollIntoView();
+}
 
 
+const closeFile = () => {
+    const video = document.getElementById("video");
+    let title   = document.getElementById("selectedFile");
 
-// Background Functions
+    document.getElementById("image-viewer").style.display   = "none";
-const getBackgrounds = async () => {
+    document.getElementById("text-viewer").style.display    = "none";
-    const ulElm = document.getElementById('backgroundSelection');
+    document.getElementById("pdf-viewer").style.display     = "none";
-    const data  = await fetchData( formatURL("backgrounds") );
+    document.getElementById("video-controls").style.display = "none";
 
-    size        = data.backgrounds.length - 1;
+    title.innerText     = "";
-    backgrounds = data.backgrounds;
+    video.style.display = "none";
-    for (var i = 0; i < size; i++) {
+    video.style.cursor  = '';
-        generateBgElm(ulElm, backgrounds[i]);
+    video.pause();
+}
+
+const showFile = async (title, hash, extension, type) => {
+    document.getElementById("image-viewer").style.display   = "none";
+    document.getElementById("text-viewer").style.display    = "none";
+    document.getElementById("pdf-viewer").style.display     = "none";
+    document.getElementById("video").style.display          = "none";
+    document.getElementById("video-controls").style.display = "none";
+
+    let titleElm          = document.getElementById("selectedFile");
+    titleElm.innerText    = title;
+
+    if (type === "video") {
+        setupVideo(hash, extension);
+    }
+     if (type === "file") {
+        setupFile(hash, extension);
     }
 }
 
-const generateBgElm = (ulElm, background) => {
+const setupVideo = async (hash, extension) => {
-    const liElm   = document.createElement("LI");
+    let video           = document.getElementById("video");
-    const imgElm  = document.createElement("IMG");
+    let controls        = document.getElementById("video-controls");
-    const imgPath = formatURL("static/imgs/backgrounds/" + background);
+    video.poster        = "static/imgs/icons/loading.gif";
+    video.style.display = "";
+    video.src           = "#"
+    video_path          = "api/file-manager-action/files/" + hash;
+    let modal           = new bootstrap.Modal(document.getElementById('file-view-modal'), { keyboard: false });
 
-    imgElm.src   = imgPath;
-    imgElm.className = "bgimgs";
 
-    liElm.appendChild(imgElm);
+    try {
-    ulElm.appendChild(liElm);
+        if ((/\.(avi|mkv|wmv|flv|f4v|mov|m4v|mpg|mpeg|mp4|webm|mp3|flac|ogg)$/i).test(extension)) {
-}
+            if ((/\.(avi|mkv|wmv|flv|f4v)$/i).test(extension)) {
-
+                data = await fetchData( "api/file-manager-action/remux/" + hash );
-const loadBackground = () => {
+                if ( data.hasOwnProperty('path') ) {
-    let bgElm = document.getElementById("bg");
+                    video_path = data.path;
-    let val   = getCookie('bgSlug');
-
-    if (val == "" || val == undefined) {
-        let path = formatURL('static/imgs/backgrounds/background.png');
-        setCookie('bgSlug', path);
-        bgElm.src = path;
                 } else {
-        bgElm.src = val;
+                    displayMessage(data.message.text, data.message.type, 3);
+                    return ;
                 }
-}
+            } else if ((/\.(flv|mov|m4v|mpg|mpeg)$/i).test(extension)) {
-
+                modal.hide();
-const setBackgroundCookie = (path) => {
+                openWithLocalProgram(hash, extension);
-    document.getElementById("bg").src = path;
-    setCookie('bgSlug', path);
-}
-
-const clearBackgroundList = () => {
-    let bgList = document.getElementById("backgroundSelection");
-    clearChildNodes(bgList);
-}
-
-// Fave Modal and List Functions
-
-const loadFavorites = async () => {
-    const isLoggedIn = document.getElementsByClassName("btn btn-success")[0].innerText.includes("Login");
-    if (!isLoggedIn) {
-        const data  = await fetchData( formatURL("favorites") );
-        const ulElm = document.getElementById('favoritesSelection');
-
-        size        = data.faves.length;
-        faves       = data.faves;
-        for (var i = 0; i < size; i++) {
-            generateFaveLinkElm(ulElm, faves[i][0], faves[i][1], faves[i][2]);
-        }
-    }
-}
-
-const setFaveLinkIco = (link) => {
-    let iconElm  = document.getElementById("faveLinkImage");
-    let gIcoElm  = document.getElementsByName('faveIconGoo')[0];
-    let iIcoElm  = document.getElementsByName('faveIconIco')[0];
-    let pIcoElm  = document.getElementsByName('faveIconPng')[0];
-    let jIcoelm  = document.getElementsByName('faveIconJpg')[0];
-    let gfIcoElm = document.getElementsByName('faveIconGif')[0];
-
-    let gIcon    = 'http://www.google.com/s2/favicons?domain=';
-    let dArry    = link.split('/');
-    let iIcon    = "";
-    let pIcon    = "";
-    let jIcon    = "";
-    let gfIcon   = "";
-
-    // Check if we can see domain...
-    if (dArry.length >= 3) {
-        let domain = dArry[2];
-        gIcon  = gIcon += domain;
-        iIcon  = "//" + domain + "/favicon.ico";
-        pIcon  = "//" + domain + "/favicon.png";
-        jIcon  = "//" + domain + "/favicon.jpg";
-        gfIcon = "//" + domain + "/favicon.gif";
-    } else {
-        // Check if IP
-        if ( ipRegex.test(link) || ipRegexWithPort.test(link) ) {
-            iIcon  = link + "/favicon.ico";
-            pIcon  = link + "/favicon.png";
-            jIcon  = link + "/favicon.jpg";
-            gfIcon = link + "/favicon.gif";
-        } else { // set generic fave icon.
-            clearFaveIcons();
                 return ;
             }
         }
 
-    iconElm.src  = iIcon;
+        modal.show();
-    gIcoElm.src  = gIcon;
+        controls.style.display = "none";
-    iIcoElm.src  = iIcon;
+        video.src              = video_path;
-    pIcoElm.src  = pIcon;
+    } catch (e) {
-    jIcoelm.src  = jIcon;
+        video.style.display = "none";
-    gfIcoElm.src = gfIcon;
+        console.log(e);
-}
-
-const clearFaveIcons = () => {
-    const domain = "/static/imgs/icons/link-icon.png";
-    document.getElementById("faveLinkImage").src     = domain;
-    document.getElementsByName('faveIconGoo')[0].src = domain;
-    document.getElementsByName('faveIconIco')[0].src = domain;
-    document.getElementsByName('faveIconPng')[0].src = domain;
-    document.getElementsByName('faveIconJpg')[0].src = domain;
-    document.getElementsByName('faveIconGif')[0].src = domain;
-    document.getElementsByName("customFaveIconImg")[0].src = domain;
-}
-
-const faveLinkFieldManager = (eve) => {
-    const link    = eve.target.value.trim();
-    const pattern = /(https|http)/ig;
-    const result  = pattern.test(link);
-
-    if (result === true) {
-        setFaveLinkIco(link);
     }
 }
 
-const saveFaveLink = () => {
+const setupFile = async (hash, extension) => {
-    const title = document.getElementById("faveTitleField").value.trim()
+    let viewer = null;
-    const link  = document.getElementById("faveLinkField").value.trim()
+    let type   = "local";
-    const icon  = document.getElementById("faveLinkImage").src;
+    let modal  = new bootstrap.Modal(document.getElementById('file-view-modal'), { keyboard: false });
-    addFaveLinkAjax(title, icon, link);
+
+    if ((/\.(png|jpg|jpeg|gif|ico)$/i).test(extension)) {
+        type   = "image";
+        viewer = document.getElementById("image-viewer");
+    }
+    if ((/\.(txt|text|sh|cfg|conf)$/i).test(extension)) {
+        type   = "text";
+        viewer = document.getElementById("text-viewer");
+    }
+    if ((/\.(mp3|ogg|flac)$/i).test(extension)) {
+        type   = "music";
+        viewer = document.getElementById("video");
+    }
+    if ((/\.(pdf)$/i).test(extension)) {
+        type   = "pdf";
+        viewer = document.getElementById("pdf-viewer");
     }
 
-const generateFaveLinkElm = async (ulElm, titleTxt, pathTxt, aTxt) => {
+    if (type !== "text" && type !== "local" ) {
-        const liElm   = document.createElement("LI");
+        modal.show();
-        const aElm    = document.createElement("A");
+        let response = await fetch("api/file-manager-action/files/" + hash);
-        const imgElm  = document.createElement("IMG");
+        let src_obj  = URL.createObjectURL(await response.blob()); // IE10+
-        const h3Elm   = document.createElement("H3");
+        viewer.src   = src_obj;
-        const title   = document.createTextNode(titleTxt);
-        const imgPath = pathTxt;
-        const aLink   = aTxt;
-
-        aElm.href     = aLink;
-        imgElm.title  = aLink;
-        imgElm.src    = imgPath;
-        imgElm.className = "faveimgs";
-
-        h3Elm.appendChild(title)
-        aElm.appendChild(imgElm);
-        aElm.appendChild(h3Elm);
-        liElm.appendChild(aElm);
-        ulElm.appendChild(liElm);
     }
 
-const manageIcoCheckBoxs = (target = null) => {
+    if (type == "text") {
-    if (target == null)
+        let response     = await fetch("api/file-manager-action/files/" + hash);
-        return ;
+        let textData     = await response.text(); // IE10+
+        viewer.innerText = textData;
+    }
 
-    let ulElm = document.getElementById('faveIcoUlList');
+    if (type !== "local") {
-    let list  = ulElm.getElementsByTagName("INPUT");
+        viewer.style.display = "";
-    for (var i = 0; i < list.length; i++) {
+        modal.show();
-        item = list[i];
+    }
-        if (target.id != item.id) { // unceck all others
+
-            item.checked = false;
+    if (type == "local") {
-        } else { // Act on target but insure one is checked at all times...
+        openWithLocalProgram(hash);
-            if (!target.checked)
+    }
-                target.checked = true;
+}
-                const src = target.nextElementSibling.nextElementSibling.src;
+
-                document.getElementById("faveLinkImage").src = src;
+
+const openWithLocalProgram = async (hash, extension = "") => {
+    const url   = "api/file-manager-action/run-locally/" + hash;
+    const data  = await fetchData(url);
+    let message = data.message;
+    displayMessage(message.text, message.type, 3);
+}
+
+
+const searchPage = () => {
+    const query = document.getElementById('search-files-field').value.toLowerCase();
+    const list  = document.getElementById("files").querySelectorAll("li[title]");
+    const size  = list.length;
+
+    for (var i = 0; i < size; i++) {
+        if (!list[i].title.toLowerCase().includes(query)) {
+            list[i].style.display = "none";
+        } else {
+            list[i].style.display = "";
         }
     }
 }
 
-const customIconFieldManager = (eve) => {
+const clearSearch = () => {
-    let isChecked = document.getElementById('customIconChkBx').checked;
+    const list  = document.getElementById("files").querySelectorAll("li[title]");
-    if (isChecked) {
+    const size  = list.length;
-        let target = eve.target;
+
-        const src = target.value.trim();
+    document.getElementById('search-files-field').value = "";
-        document.getElementById("faveLinkImage").src = src;
+    for (var i = 0; i < size; i++) {
-        document.getElementsByName("customFaveIconImg")[0].src = src;
+        list[i].style.display = "";
     }
 }
 
-const generateBackgroundDirectoryElm = (bgDirsList, name, path) => {
-    let pthTxt  = document.createTextNode(name);
-    let liElm   = document.createElement('LI');
-    let spnElm  = document.createElement('SPAN');
-    let spnElm2 = document.createElement('SPAN');
 
-    liElm.className   = "list-group-item";
+const updateBackground = (srcLink, isvideo = true) => {
-    liElm.setAttribute('title', path);
+    try {
-    liElm.setAttribute('class', "list-group-item");
+        let elm = document.getElementById("bg");
-    spnElm2.setAttribute('class', "badge badge-danger label-as-badge");
+        if (isvideo) {
-    spnElm2.setAttribute('value', path);
+            if (elm.getAttribute('src') === "") {
-    spnElm2.addEventListener("click", eve => {
+                elm.src = srcLink;
-        removeBgFolder(eve.target);
+            }
-    });
+        } else {
-
+            elm.src = "";
-    spnElm2.innerText = "X";
+            elm.setAttribute("poster", srcLink);
-    spnElm.appendChild(pthTxt);
+        }
-    liElm.appendChild(spnElm);
+    } catch (e) { }
-    liElm.appendChild(spnElm2);
-    bgDirsList.appendChild(liElm);
 }
 
-const getHackerNews = async () => {
-    const response = await fetch("https://hacker-news.firebaseio.com/v0/beststories.json");
-    const ids      = await response.json();
 
-    let table    = document.getElementById("hackerNewsTable");
+const manageFavorites = (elm) => {
-    let arrySize = ids.length;
+    const classType = "btn-info";
-    let j        = 1;
+    const hasClass  = elm.classList.contains(classType);
-
+    if (hasClass) {
-    for (var i = 0; i < arrySize; i++) {
+        elm.classList.remove(classType);
-        let artJSON = "https://hacker-news.firebaseio.com/v0/item/" + ids[i] + ".json";
+        action = "delete";
-        generateNewsElm(table, artJSON, j);
+    } else {
-        j++;
+        elm.classList.add(classType);
-    }
+        action = "add";
     }
 
-const generateNewsElm = async (table, artJSON, j) => {
+    manageFavoritesAjax(action);
-    const response    = await fetch(artJSON);
-    const article     = await response.json();
-
-    let trItem        = document.createElement("TR");
-    let tdItemNumber  = document.createElement("TD");
-    let tdItemLink    = document.createElement("TD");
-    let anchorItem    = document.createElement("A");
-    let numberText    = document.createTextNode(j);
-    let titleText     = document.createTextNode(article["title"]);
-
-    anchorItem.href   =  article["url"];
-    anchorItem.target =  "_blank";
-
-    anchorItem.appendChild(titleText);
-    tdItemNumber.appendChild(numberText);
-    tdItemLink.appendChild(anchorItem);
-
-    trItem.setAttribute("scope", "row");
-    trItem.appendChild(tdItemNumber);
-    trItem.appendChild(tdItemLink);
-    table.appendChild(trItem);
 }
 
+
+const loadFavorite = (id) => {
+    loadFavoriteLink(id);
+    document.getElementById("favorites-modal")
+            .getElementsByClassName("modal-footer")[0]
+            .children[0].click()
+}
+
+
+
 // Message handler
 const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") => {
     let alertField  = document.getElementById(msgWindow);
@@ -257,13 +211,13 @@ const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") =
     let spnElm      = document.createElement("SPAN");
     let textElm     = document.createTextNode(message);
 
-    divElm.setAttribute("class", "alert alert-" + type);
+    divElm.setAttribute("class", "alert alert-dismissible fade show alert-" + type);
     divElm.setAttribute("role", "alert");
     divElm.appendChild(textElm);
     btnElm.type     = "button";
     textElm         = document.createTextNode("X");
-    btnElm.setAttribute("class", "close");
+    btnElm.setAttribute("class", "btn-dark btn-close");
-    btnElm.setAttribute("data-dismiss", "alert");
+    btnElm.setAttribute("data-bs-dismiss", "alert");
     btnElm.setAttribute("aria-label", "close");
     spnElm.setAttribute("aria-hidden", "true");
     spnElm.appendChild(textElm);
@@ -283,3 +237,35 @@ const clearChildNodes = (parent) => {
         parent.removeChild(parent.firstChild);
     }
 }
+
+
+// Cache Buster
+const clearCache = () => {
+    const rep = /.*\?.*/;
+    let links     = document.getElementsByTagName('link'),
+        scripts   = document.getElementsByTagName('script'),
+        video     = document.getElementsByTagName('video'),
+        process_scripts = false;
+
+    for (let i = 0; i < links.length; i++) {
+        let link = links[i],
+        href = link.href;
+        if(rep.test(href)) {
+            link.href = href + '&' + Date.now();
+        } else {
+            link.href = href + '?' + Date.now();
+        }
+
+    }
+    if(process_scripts) {
+        for (let i = 0; i < scripts.length; i++) {
+            let script = scripts[i],
+            src = script.src;
+            if(rep.test(src)) {
+                script.src = src+'&'+Date.now();
+            } else {
+                script.src = src+'?'+Date.now();
+            }
+        }
+    }
+}

src/core/static/js/video-events.js

@@ -195,6 +195,17 @@ $( "#video" ).bind( "timeupdate", async function(eve) {
     videoDuration.innerText = getTimeFormatted(video.currentTime);
 });
 
+// $( "#video" ).bind( "ended", async function(eve) {
+//     alert("Hello...")
+//     // let videoDuration = document.getElementById("videoCurrentTime");
+//     // const video       = eve.target;
+//     // const seekto      = document.getElementById("seek-slider");
+//     // const vt          = video.currentTime * (100 / video.duration);
+//     //
+//     // seekto.value            = vt;
+//     // videoDuration.innerText = getTimeFormatted(video.currentTime);
+// });
+
 $( "#seek-slider" ).bind( "change", async function(eve) {
     const slider = eve.target;
     let video    = document.getElementById("video");

src/core/templates/body-footer.html

@@ -1,8 +1,8 @@
 {% if current_directory %}
-<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center fixed-bottom">
+<nav class="navbar navbar-dark bg-dark navbar-expand-lg justify-content-center text-center fixed-bottom">
-    <button class="navbar-toggler" type="button" data-toggle="collapse"
+    <div class="container-fluid">
-        data-target="#navbarTogglerFooter" aria-controls="navbarTogglerFooter"
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerFooter"
-        aria-expanded="false" aria-label="Toggle Footer Navigation">
+                aria-controls="navbarTogglerFooter" aria-expanded="false" aria-label="Toggle Footer Navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
 
@@ -16,5 +16,6 @@
                 </li>
             </ul>
         </div>
+    </div>
 </nav>
 {% endif %}

src/core/templates/body-header.html

@@ -1,15 +1,16 @@
 <nav class="container navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center sticky-top">
-    <button class="navbar-toggler" type="button" data-toggle="collapse"
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-            data-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader"
+            data-bs-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader"
                 aria-expanded="false" aria-label="Toggle Header Navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
 
     <div id="navbarTogglerHeader" class="row collapse navbar-collapse">
         {% if current_directory %}
+            <div class="col">
                 <!-- Left menues -->
                 <ul class="navbar-nav">
-                <li class="nav-item" data-toggle="modal" data-target="#file-view-modal">
+                    <li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
                         <i class="nav-link" aria-hidden="true" title="File viewer..." >
                             🖼
                         </i>
@@ -23,21 +24,23 @@
                             </div>
                         </div>
                     </li>
-                <li class="nav-item" data-toggle="modal" data-target="#favorites-modal">
+                    <li class="nav-item" data-bs-toggle="modal" data-bs-target="#favorites-modal">
                         <i class="nav-link" aria-hidden="true" title="Faves list..." >
-                        Faves List &#8597;
+                            Faves List
                         </i>
                     </li>
                     <li class="nav-item">
                         <i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." >
-                        Scroll Files To Top
+                            Scroll To Top
                         </i>
                     </li>
                 </ul>
+            </div>
         {% endif %}
 
+        <div class="col col-auto">
             <!-- Right menues -->
-        <ul class="navbar-nav ml-auto">
+            <ul class="navbar-nav">
                 {% if current_directory %}
                     <li class="nav-item">
                         <i id="back-btn" class="fa fa-arrow-left nav-link" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
@@ -50,7 +53,7 @@
                         </i>
                     </li>
                 {% endif %}
-            <li class="nav-item" data-toggle="modal" data-target="#options-modal">
+                <li class="nav-item" data-bs-toggle="modal" data-bs-target="#options-modal">
                     <i class="nav-link fa fa-gear" aria-hidden="true" title="Other options..." >
                         Settings
                     </i>
@@ -64,7 +67,7 @@
                 {% endif %}
                 {% if not current_user.is_authenticated and not oidc_loggedin() %}
                     <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                             Account
                         </a>
                         <div class="dropdown-menu">
@@ -79,4 +82,5 @@
                 {% endif %}
             </ul>
         </div>
+    </div>
 </nav>

src/core/templates/layout.html

@@ -20,7 +20,7 @@
         <!-- Bootstrap CSS -->
         <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')}}">
-        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap-datepicker.css')}}">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/mdb.dark.min.css')}}">
 
         <!-- Font Awesome CSS Notes -->
         <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> -->
@@ -99,19 +99,18 @@
 
 
     {% block body_scripts %}
+        <!-- For internal scripts... -->
+        <script src="{{ url_for('static', filename='js/libs/jquery-3.6.0.min.js')}}"></script>
+
         <!-- For Bootstrap in this exact order... -->
-        <script src="{{ url_for('static', filename='js/libs/bootstrap/jquery-3.3.1.slim.min.js')}}"></script>
         <script src="{{ url_for('static', filename='js/libs/bootstrap/popper.min.js')}}"></script>
         <script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap.min.js')}}"></script>
-
+        <script src="{{ url_for('static', filename='js/libs/bootstrap/mdb.min.js')}}"></script>
-        <!-- For DatePicker -->
-        <script src="{{ url_for('static', filename='js/libs/bootstrap/moment.min.js')}}"></script>
-        <script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap-datepicker.min.js')}}"></script>
 
         <!-- For React -->
         <script src="{{ url_for('static', filename='js/libs/react/react.production.min.js')}}"></script>
         <script src="{{ url_for('static', filename='js/libs/react/react-dom.production.min.js')}}"></script>
-        <script src="{{ url_for('static', filename='js/libs/react/babel.min.js')}}"></script>
+        <script src="{{ url_for('static', filename='js/libs/babel.min.js')}}"></script>
 
         <!-- Application Imports -->
         {% block body_scripts_additional %}

src/core/templates/modals/favorites-modal.html

@@ -5,7 +5,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h3>Favorites:</h3>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
@@ -20,7 +20,7 @@
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                    <button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
                 </div>
             </div>
         </div>

src/core/templates/modals/file-modal.html

@@ -5,7 +5,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3>File Viewer:</h3> <span id="selectedFile"></span>
-                <button onclick="closeFile()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                <button onclick="closeFile()" type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
             </div>
 
             <div class="modal-body text-center justify-content-center">
@@ -25,7 +25,7 @@
                             <div id="video-controls">
                                 <div class="row pl-5 pr-5">
                                     <div class="col-md-8">
-                                        <input id="seek-slider" class="form-control-range" type="range" min="0" value="0" max="100" step="1"/>
+                                        <input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
                                     </div>
                                     <div class="col-md-3">
                                         <span id="videoCurrentTime"></span>

src/core/templates/modals/options-modal.html

@@ -5,7 +5,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3>Settings:</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -16,7 +16,7 @@
 
                         <!-- <center>
                             <form>
-                                <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
+                                <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-bs-multiple-caption="{count} files selected" multiple />
                                 <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
                                 <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
                                 <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
@@ -36,7 +36,7 @@
             </div>
 
             <div class="modal-footer">
-                <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                <button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
             </div>
         </div>
     </div>