From de4adca059b169e75267c8a29012e9988a607bc2 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 3 Nov 2022 19:00:34 +0530
Subject: [PATCH] fix: "No modifications allowed" error on file drag in Firefox

---
 .../FileDragNDropProvider.tsx                 | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx b/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx
index 470406e56..8cdc43020 100644
--- a/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx
+++ b/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx
@@ -100,6 +100,20 @@ const FileDragNDropProvider = ({ application, children, featuresController, file
     [application],
   )
 
+  const handleDragStart = useCallback(
+    (event: DragEvent) => {
+      if (isHandlingFileDrag(event, application)) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        if (event.dataTransfer) {
+          event.dataTransfer.clearData()
+        }
+      }
+    },
+    [application],
+  )
+
   const handleDragIn = useCallback(
     (event: DragEvent) => {
       if (!isHandlingFileDrag(event, application)) {
@@ -200,7 +214,6 @@ const FileDragNDropProvider = ({ application, children, featuresController, file
           }
         })
 
-        event.dataTransfer.clearData()
         dragCounter.current = 0
       }
     },
@@ -208,18 +221,20 @@ const FileDragNDropProvider = ({ application, children, featuresController, file
   )
 
   useEffect(() => {
+    window.addEventListener('dragstart', handleDragStart)
     window.addEventListener('dragenter', handleDragIn)
     window.addEventListener('dragleave', handleDragOut)
     window.addEventListener('dragover', handleDrag)
     window.addEventListener('drop', handleDrop)
 
     return () => {
+      window.removeEventListener('dragstart', handleDragStart)
       window.removeEventListener('dragenter', handleDragIn)
       window.removeEventListener('dragleave', handleDragOut)
       window.removeEventListener('dragover', handleDrag)
       window.removeEventListener('drop', handleDrop)
     }
-  }, [handleDragIn, handleDrop, handleDrag, handleDragOut])
+  }, [handleDragIn, handleDrop, handleDrag, handleDragOut, handleDragStart])
 
   const contextValue = useMemo(() => {
     return {