MDL-62712 Filepicker: Improve upload process

Lost the uploading file when user press Submit before upload process has done

course/dndupload.js

@@ -57,6 +57,8 @@ M.course_dndupload = {
     // The selector identifying the list of modules within a section (note changing this may require
     // changes to the get_mods_element function)
     modslistselector: 'ul.section',
+    // Original onbeforeunload event.
+    originalUnloadEvent: null,
 
     /**
      * Initalise the drag and drop upload interface
@@ -761,6 +763,10 @@ M.course_dndupload = {
         // Wait for the AJAX call to complete, then update the
         // dummy element with the returned details
         xhr.onreadystatechange = function() {
+            if (xhr.readyState == 1) {
+                this.originalUnloadEvent = window.onbeforeunload;
+                self.reportUploadDirtyState(true);
+            }
             if (xhr.readyState == 4) {
                 if (xhr.status == 200) {
                     var result = JSON.parse(xhr.responseText);
@@ -787,6 +793,7 @@ M.course_dndupload = {
                 } else {
                     new M.core.alert({message: M.util.get_string('servererror', 'moodle')});
                 }
+                self.reportUploadDirtyState(false);
             }
         };
 
@@ -990,6 +997,10 @@ M.course_dndupload = {
         // Wait for the AJAX call to complete, then update the
         // dummy element with the returned details
         xhr.onreadystatechange = function() {
+            if (xhr.readyState == 1) {
+                this.originalUnloadEvent = window.onbeforeunload;
+                self.reportUploadDirtyState(true);
+            }
             if (xhr.readyState == 4) {
                 if (xhr.status == 200) {
                     var result = JSON.parse(xhr.responseText);
@@ -1012,6 +1023,7 @@ M.course_dndupload = {
                 } else {
                     new M.core.alert({message: M.util.get_string('servererror', 'moodle')});
                 }
+                self.reportUploadDirtyState(false);
             }
         };
 
@@ -1045,5 +1057,24 @@ M.course_dndupload = {
         if (M.core.actionmenu && M.core.actionmenu.newDOMNode) {
             M.core.actionmenu.newDOMNode(node);
         }
+    },
+
+    /**
+     * Set the event to prevent user navigate away when upload progress still running.
+     *
+     * @param {bool} enable true if upload progress is running, false otherwise
+     */
+    reportUploadDirtyState: function(enable) {
+        if (!enable) {
+            window.onbeforeunload = this.originalUnloadEvent;
+        } else {
+            window.onbeforeunload = function(e) {
+                var warningMessage = M.util.get_string('changesmadereallygoaway', 'moodle');
+                if (e) {
+                    e.returnValue = warningMessage;
+                }
+                return warningMessage;
+            };
+        }
     }
 };

course/dnduploadlib.php

@@ -65,7 +65,8 @@ function dndupload_add_to_course($course, $modnames) {
             array('actionchoice', 'moodle'),
             array('servererror', 'moodle'),
             array('upload', 'moodle'),
-            array('cancel', 'moodle')
+            array('cancel', 'moodle'),
+            array('changesmadereallygoaway', 'moodle')
         ),
         'requires' => array('node', 'event', 'json', 'anim')
     );

lib/form/dndupload.js

@@ -495,6 +495,8 @@ M.form_dndupload.init = function(Y, options) {
         overwriteall: false,
         // Set to true if the user has clicked on 'rename all'.
         renameall: false,
+        // Original onbeforeunload event.
+        originalUnloadEvent: null,
 
         /**
          * Initialise the settings for the dnduploader
@@ -527,6 +529,8 @@ M.form_dndupload.init = function(Y, options) {
                     this.callbackcancel();
                 }
             }
+            this.originalUnloadEvent = window.onbeforeunload;
+            this.reportUploadDirtyState(true);
         },
 
         /**
@@ -839,6 +843,7 @@ M.form_dndupload.init = function(Y, options) {
          * Run the callback to the filemanager/filepicker
          */
         uploadfinished: function(lastresult) {
+            this.reportUploadDirtyState(false);
             this.callback(lastresult);
         },
 
@@ -938,6 +943,25 @@ M.form_dndupload.init = function(Y, options) {
             xhr.open("POST", uploadUrl, true);
             xhr.send(formdata);
             return true;
+        },
+
+        /**
+         * Set the event to prevent user navigate away when upload progress still running.
+         *
+         * @param {bool} enable true if upload progress is running, false otherwise
+         */
+        reportUploadDirtyState: function(enable) {
+            if (!enable) {
+                window.onbeforeunload = this.originalUnloadEvent;
+            } else {
+                window.onbeforeunload = function(e) {
+                    var warningMessage = M.util.get_string('changesmadereallygoaway', 'moodle');
+                    if (e) {
+                        e.returnValue = warningMessage;
+                    }
+                    return warningMessage;
+                };
+            }
         }
     });
 

lib/outputrequirementslib.php

@@ -795,6 +795,7 @@ protected function find_module($component) {
                                                         array('dndenabled_inbox', 'moodle'), array('fileexists', 'moodle'), array('maxbytesfile', 'error'),
                                                         array('sizegb', 'moodle'), array('sizemb', 'moodle'), array('sizekb', 'moodle'), array('sizeb', 'moodle'),
                                                         array('maxareabytesreached', 'moodle'), array('serverconnection', 'error'),
+                                                        array('changesmadereallygoaway', 'moodle')
                                                     ));
                     break;
             }