feat: add an 'Upload' button at the bottom of OpenFilePicker

Author: jelveh

src/gui/src/UI/UIWindow.js

@@ -374,8 +374,8 @@ async function UIWindow(options) {
         // is_saveFileDialog
         if(options.is_saveFileDialog){
             h += `<div class="window-filedialog-prompt">`;
-                h += `<div style="display:flex;">`;
-                    h += `<input type="text" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${html_encode(options.saveFileDialog_default_filename) ?? ''}">`;
+                h += `<div style="display:flex; flex-grow: 1;">`;
+                    h += `<input type="text" style="flex-grow:1;" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${html_encode(options.saveFileDialog_default_filename) ?? ''}">`;
                     h += `<button class="button button-small filedialog-cancel-btn">${i18n('cancel')}</button>`;
                     h += `<button class="button `;
                         if(options.saveFileDialog_default_filename === undefined || options.saveFileDialog_default_filename === '')
@@ -388,7 +388,13 @@ async function UIWindow(options) {
         // is_openFileDialog
         else if(options.is_openFileDialog){
             h += `<div class="window-filedialog-prompt">`;
-                h += `<div style="text-align:right;">`;
+                // 'upload here'
+                h += `<div class="window-filedialog-upload-here"><svg xmlns="http://www.w3.org/2000/svg" style="width: 18px; height: 18px; margin-bottom: -5px;" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>
+  <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
+</svg> ${i18n('upload')}</div>`;
+
+                h += `<div style="text-align:right; flex-grow:1;">`;
                     h += `<button class="button button-small filedialog-cancel-btn">${i18n('cancel')}</button>`;
                     h += `<button class="button disabled button-small button-primary openfiledialog-open-btn">${i18n('open')}</button>`;
                 h += `</div>`;
@@ -398,7 +404,7 @@ async function UIWindow(options) {
         // is_directoryPicker
         else if(options.is_directoryPicker){
             h += `<div class="window-filedialog-prompt">`;
-                h += `<div style="text-align:right;">`;
+                h += `<div style="text-align:right; flex-grow: 1;">`;
                     h += `<button class="button button-small filedialog-cancel-btn">${i18n('cancel')}</button>`;
                     h += `<button class="button button-small button-primary directorypicker-select-btn" style="margin-left:10px;">${i18n('select')}</button>`;
                 h += `</div>`;
@@ -492,7 +498,13 @@ async function UIWindow(options) {
     const el_filedialog_cancel_btn = document.querySelector(`#window-${win_id} .filedialog-cancel-btn`);
     const el_openfiledialog_open_btn = document.querySelector(`#window-${win_id} .openfiledialog-open-btn`);
     const el_directorypicker_select_btn = document.querySelector(`#window-${win_id} .directorypicker-select-btn`);
+    const el_window_filedialog_upload_here = document.querySelector(`#window-${win_id} .window-filedialog-upload-here`);
 
+    if(el_window_filedialog_upload_here){
+        el_window_filedialog_upload_here.addEventListener('click', function(){
+            window.init_upload_using_dialog(el_window_body, $(el_window).attr('data-path') + '/');
+        });
+    }
     // attach optional event listeners
     el_window.on_before_exit = options.on_before_exit;
 

src/gui/src/css/style.css

@@ -1324,8 +1324,9 @@ span.header-sort-icon img {
     background-color: #f3f5f9;
     padding: 0 15px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
+    align-items: center;
 }
 
 .savefiledialog-filename {
@@ -1337,6 +1338,16 @@ span.header-sort-icon img {
     flex-grow: 1;
 }
 
+.window-filedialog-upload-here{
+    -webkit-font-smoothing: antialiased;
+    opacity: 0.7;
+    font-size: 14px;
+}
+
+.window-filedialog-upload-here:hover{
+    cursor: pointer;
+    opacity: 1;
+}
 .savefiledialog-save-btn, .openfiledialog-open-btn {
     margin-left: 10px;
 }

src/gui/src/helpers/launch_app.js

@@ -306,7 +306,6 @@ const launch_app = async (options)=>{
         if(app_info.metadata?.credentialless !== undefined && typeof app_info.metadata.credentialless === 'boolean')
             credentialless = app_info.metadata.credentialless;
 
-        console.log('credentialless', credentialless);
         // open window
         el_win = UIWindow({
             element_uuid: uuid,