drag and drop image uploading - untested yet, issue with local install URL underscore in path???

system/admin/editor/css/editor.css

@@ -185,4 +185,22 @@ pre code {
 
 .notice.error {
   background-color: #fdd;
-}
+}
+
+/* drag and drop uploading */
+/*btn blue #007bff, hover darker #0069d9*/
+.vs-dropzone {
+  border: 2px dashed #007bff;
+  border-radius: .5rem;
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+  cursor: pointer;
+  transition: background .2s ease-in-out;
+  margin-bottom: 1rem;
+}
+.vs-dropzone.dragover {
+  background: #e9f5ff;
+  border-color: #0069d9;
+  color: #0069d9;
+}

system/admin/editor/js/editor.js

@@ -70,4 +70,50 @@
     //=====end image uploader=====
     editor.run();
 
+    //=====drag and drop uploading=====
+    function initDropZone(dropZoneId, fileInputId) {
+      const dropZone = document.getElementById(dropZoneId);
+      const fileInput = document.getElementById(fileInputId);
+      if (!dropZone || !fileInput) return; // fail gracefully
+
+      // Clicking the drop zone triggers the file picker
+      dropZone.addEventListener('click', (e) => {
+        e.preventDefault(); // prevent button form submit
+        fileInput.click();
+      });
+
+      // Highlight on dragover (styles in css file)
+      dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('dragover');
+      });
+
+      // Remove highlight on dragleave
+      dropZone.addEventListener('dragleave', () => {
+        dropZone.classList.remove('dragover');
+      });
+
+      // Handle drop
+      dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('dragover');
+
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+          fileInput.files = files;
+
+          // Fire both 'change' and 'input' to simulate a real user selection
+          ['change', 'input'].forEach(eventType => {
+            const event = new Event(eventType, { bubbles: true });
+            fileInput.dispatchEvent(event);
+          });
+        }
+      });
+    }
+
+    // Initialize dropZones
+    initDropZone('vs_dropZoneF', 'insertMediaDialogFile');  // Featured image
+    initDropZone('vs_dropZoneC', 'insertImageDialogFile');  // Content image
+    //=====end drag and drop uploading=====
+
 })();

system/admin/views/add-content.html.php

@@ -299,7 +299,8 @@ $( function() {
                             <hr>
                             <div class="form-group">
                                 <label for="insertImageDialogFile"><?php echo i18n('Upload');?></label>
-                                <input type="file" class="form-control-file" name="file" id="insertImageDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" />
+                                <input type="file" class="form-control-file" name="file" id="insertImageDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" style="display:none;" />
+                                <button id="vs_dropZoneC" class="vs-dropzone" type="button">Drag &amp; Drop image here, or click to browse</button>
                             </div>
                             <hr>
                             <div class="form-group">
@@ -339,7 +340,8 @@ $( function() {
                             <hr>
                             <div class="form-group">
                                 <label for="insertMediaDialogFile"><?php echo i18n('Upload');?></label>
-                                <input type="file" class="form-control-file" name="file" id="insertMediaDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" />
+                                <input type="file" class="form-control-file" name="file" id="insertMediaDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" style="display:none;" />
+                                <button id="vs_dropZoneF" class="vs-dropzone" type="button">Drag &amp; Drop image here, or click to browse</button>
                             </div>
                             <hr>
                             <div class="form-group">

system/admin/views/add-page.html.php

@@ -165,7 +165,8 @@ if ($type == 'is_page') {
                             <hr>
                             <div class="form-group">
                                 <label for="insertImageDialogFile"><?php echo i18n('Upload');?></label>
-                                <input type="file" class="form-control-file" name="file" id="insertImageDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" />
+                                <input type="file" class="form-control-file" name="file" id="insertImageDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" style="display:none;" />
+                                <button id="vs_dropZoneC" class="vs-dropzone" type="button">Drag &amp; Drop image here, or click to browse</button>
                             </div>
                             <hr>
                             <div class="form-group">

system/admin/views/edit-content.html.php

@@ -392,8 +392,9 @@ $( function() {
                             </div>
                             <hr>
                             <div class="form-group">
-                                <label for="insertMediaDialogFile"><?php echo i18n('Upload');?></label>
-                                <input type="file" class="form-control-file" name="file" id="insertMediaDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" />
+                                <label for="insertImageDialogFile"><?php echo i18n('Upload');?></label>
+                                <input type="file" class="form-control-file" name="file" id="insertImageDialogFile" accept="image/png,image/jpeg,image/gif, image/webp" style="display:none;" style="display:none;" />
+                                <button id="vs_dropZoneC" class="vs-dropzone" type="button">Drag &amp; Drop image here, or click to browse</button>
                             </div>
                             <hr>
                             <div class="form-group">