Add drag and drop audio files onto LoadAudio nodes (#2710)

Co-authored-by: Chenlei Hu <huchenlei@proton.me>

src/extensions/core/uploadAudio.ts

@@ -2,6 +2,7 @@
 import type { IWidget } from '@comfyorg/litegraph'
 import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
+import { useNodeDragAndDrop } from '@/composables/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import type { DOMWidget } from '@/scripts/domWidget'
 import { useToastStore } from '@/stores/toastStore'
@@ -180,13 +181,16 @@ app.registerExtension({
           }
         }
 
+        const handleUpload = async (files: File[]) => {
+          if (files?.length) {
+            uploadFile(audioWidget, audioUIWidget, files[0], true)
+          }
+          return files
+        }
+
         const { openFileSelection } = useNodeFileInput(node, {
           accept: 'audio/*',
-          onSelect: (files) => {
-            if (files?.length) {
-              uploadFile(audioWidget, audioUIWidget, files[0], true)
-            }
-          }
+          onSelect: handleUpload
         })
 
         // The widget to pop up the upload dialog.
@@ -199,6 +203,11 @@ app.registerExtension({
         )
         uploadWidget.label = 'choose file to upload'
 
+        useNodeDragAndDrop(node, {
+          fileFilter: (file) => file.type.startsWith('audio/'),
+          onDrop: handleUpload
+        })
+
         node.previewMediaType = 'audio'
 
         return { widget: uploadWidget }