Implement drag-and-drop file upload feature in app settings

* Added a new checkbox option to enable automatic upload and opening of files when dragged and dropped onto the app window. Updated relevant functions to handle this new setting, ensuring it is saved, reset, and checked for changes correctly.
* Enhanced the UIWindow and launch_app functions to support the new upload_and_open_on_drag functionality, allowing for a smoother user experience when interacting with files.

Author: jelveh

src/dev-center/js/apps.js

@@ -436,6 +436,12 @@ function generate_edit_app_section(app) {
                     <p>This will set your app's window title to the opened file's name when a user opens a file in your app.</p>
                 </div>
 
+                <div style="margin-top:30px;">
+                    <input type="checkbox" id="edit-app-upload-and-open-on-drag" name="edit-app-upload-and-open-on-drag" value="true" ${app.metadata?.upload_and_open_on_drag ? 'checked' : ''} ${app.background ? 'disabled' : ''}>
+                    <label for="edit-app-upload-and-open-on-drag" style="display: inline;">Upload and open files on drag-and-drop</label>
+                    <p>If checked, when the user drags and drops a file on the app it will be automatically uploaded to their desktop and opened in a new instance of the app.</p>
+                </div>
+
                 <h3 style="font-size: 23px; border-bottom: 1px solid #EEE; margin-top: 50px; margin-bottom: 0px;">Misc</h3>
                 <div style="margin-top:30px;">
                     <input type="checkbox" id="edit-app-locked" name="edit-app-locked" value="true" ${app.metadata?.locked ? 'checked' : ''}>
@@ -511,7 +517,8 @@ function trackOriginalValues(){
             hideTitleBar: $('#edit-app-hide-titlebar').is(':checked'),
             locked: $('#edit-app-locked').is(':checked'),
             fullPageOnLanding: $('#edit-app-fullpage-on-landing').is(':checked'),
-            setTitleToFile: $('#edit-app-set-title-to-file').is(':checked')
+            setTitleToFile: $('#edit-app-set-title-to-file').is(':checked'),
+            uploadOnDrag: $('#edit-app-upload-and-open-on-drag').is(':checked')
         }
     };
 }
@@ -548,7 +555,8 @@ function hasChanges() {
         $('#edit-app-hide-titlebar').is(':checked') !== originalValues.checkboxes.hideTitleBar ||
         $('#edit-app-locked').is(':checked') !== originalValues.checkboxes.locked ||
         $('#edit-app-fullpage-on-landing').is(':checked') !== originalValues.checkboxes.fullPageOnLanding ||
-        $('#edit-app-set-title-to-file').is(':checked') !== originalValues.checkboxes.setTitleToFile
+        $('#edit-app-set-title-to-file').is(':checked') !== originalValues.checkboxes.setTitleToFile ||
+        $('#edit-app-upload-and-open-on-drag').is(':checked') !== originalValues.checkboxes.uploadOnDrag
     );
 }
 
@@ -596,6 +604,7 @@ function resetToOriginalValues() {
     $('#edit-app-locked').prop('checked', originalValues.checkboxes.locked);
     $('#edit-app-fullpage-on-landing').prop('checked', originalValues.checkboxes.fullPageOnLanding);
     $('#edit-app-set-title-to-file').prop('checked', originalValues.checkboxes.setTitleToFile);
+    $('#edit-app-upload-and-open-on-drag').prop('checked', originalValues.checkboxes.uploadOnDrag);
 
     if (originalValues.icon) {
         $('#edit-app-icon').css('background-image', `url(${originalValues.icon})`);
@@ -1151,6 +1160,7 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
             hide_titlebar: $('#edit-app-hide-titlebar').is(":checked"),
             locked: $(`#edit-app-locked`).is(":checked") ?? false,
             set_title_to_opened_file: $('#edit-app-set-title-to-file').is(":checked"),
+            upload_and_open_on_drag: $('#edit-app-upload-and-open-on-drag').is(":checked"),
         },
         filetypeAssociations: filetype_associations,
     }).then(async (app) => {

src/gui/src/UI/UIWindow.js

@@ -117,6 +117,7 @@ async function UIWindow(options) {
     options.is_maximized = options.is_maximized ?? false;
     options.is_openFileDialog = options.is_openFileDialog ?? false;
     options.is_resizable = options.is_resizable ?? true;
+    options.upload_and_open_on_drag = options.upload_and_open_on_drag ?? false;
 
     // if this is a fullpage window, it won't be resizable
     if(options.is_fullpage){
@@ -257,6 +258,7 @@ async function UIWindow(options) {
                 data-update_window_url = "${options.update_window_url && options.is_visible}"
                 data-user_set_url_params = "${html_encode(user_set_url_params)}"
                 data-initial_zindex = "${zindex}"
+                data-upload_and_open_on_drag = "${options.upload_and_open_on_drag}"
                 style=" z-index: ${zindex}; 
                         ${options.width !== undefined ? 'width: ' + html_encode(options.width) +'; ':''}
                         ${options.height !== undefined ? 'height: ' + html_encode(options.height) +'; ':''}
@@ -1689,7 +1691,7 @@ async function UIWindow(options) {
 
     // --------------------------------------------------------
     // Dragster
-    // Allow dragging of local files onto this window, if it's is_dir
+    // Allow dragging of local files onto this window, if it's is_dir or if upload_and_open_on_drag is true
     // --------------------------------------------------------
     $(el_window_body).dragster({
         enter: function (dragsterEvent, event) {
@@ -1716,6 +1718,19 @@ async function UIWindow(options) {
                 // de-highlight all windows
                 $('.item-container').removeClass('item-container-active');
             }
+            // if upload_and_open_on_drag is true, open the file in a new instance of the app
+            else if(options.upload_and_open_on_drag){
+                // upload items
+                window.upload_items(e.dataTransfer.items, window.desktop_path, {
+                    success: (items) => {
+                        // open app
+                        launch_app({
+                            name: options.app,
+                            file_path: $(el_window).attr('data-path'),
+                        })
+                    }
+                })
+            }
             e.stopPropagation();
             e.preventDefault();
             return false;

src/gui/src/helpers.js

@@ -1770,7 +1770,7 @@ window.init_upload_using_dialog = function(el_target_container, target_path = nu
     })
 }
 
-window.upload_items = async function(items, dest_path){
+window.upload_items = async function(items, dest_path, options = {}){
     let upload_progress_window;
     let opid;
 
@@ -1845,6 +1845,11 @@ window.upload_items = async function(items, dest_path){
                 })
                 // remove from active_uploads
                 delete window.active_uploads[opid];
+                // if success callback is provided, call it
+                if(options.success && typeof options.success === 'function'){
+                    console.log('success callback', items);
+                    options.success(items);
+                }
             },
             // error
             error: async function(err){

src/gui/src/helpers/launch_app.js

@@ -356,6 +356,11 @@ const launch_app = async (options)=>{
         if(app_info.metadata?.set_title_to_opened_file !== undefined && typeof app_info.metadata.set_title_to_opened_file === 'boolean' && app_info.metadata.set_title_to_opened_file === true)
             title = options.file_path ? path.basename(options.file_path) : title;
 
+        // upload_on_drag
+        let upload_and_open_on_drag = false;
+        if(app_info.metadata?.upload_and_open_on_drag !== undefined && typeof app_info.metadata.upload_and_open_on_drag === 'boolean')
+            upload_and_open_on_drag = app_info.metadata.upload_and_open_on_drag;
+
         // open window
         el_win = UIWindow({
             element_uuid: uuid,
@@ -380,6 +385,7 @@ const launch_app = async (options)=>{
             is_resizable: window_resizable,
             has_head: ! hide_titlebar,
             show_in_taskbar: app_info.background ? false : window_options?.show_in_taskbar,
+            upload_and_open_on_drag: upload_and_open_on_drag,
         });
 
         // If the app is not in the background, show the window