docs(drop-container): prevent default browser drag and drop behavior (#…

…5764)
carbon-design-system · Apr 2, 2020 · 9c1896a · 9c1896a
1 parent 6068604
commit 9c1896a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/react/examples/drag-and-drop-file-uploader/package.json b/packages/react/examples/drag-and-drop-file-uploader/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "carbon-components": "latest",
     "carbon-components-react": "latest",
+    "carbon-icons": "latest",
     "react": "16.10.2",
     "react-dom": "16.10.2",
     "react-scripts": "3.2.0"

diff --git a/packages/react/examples/drag-and-drop-file-uploader/src/index.js b/packages/react/examples/drag-and-drop-file-uploader/src/index.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { render } from 'react-dom';
 import { settings } from 'carbon-components';
 import {
@@ -24,6 +24,20 @@ const { prefix } = settings;
 
 function ExampleDropContainerApp(props) {
   const [files, setFiles] = useState([]);
+  const handleDrop = e => {
+    e.preventDefault();
+  };
+  const handleDragover = e => {
+    e.preventDefault();
+  };
+  useEffect(() => {
+    document.addEventListener('drop', handleDrop);
+    document.addEventListener('dragover', handleDragover);
+    return () => {
+      document.removeEventListener('drop', handleDrop);
+      document.removeEventListener('dragover', handleDragover);
+    };
+  }, []);
   const uploadFile = async fileToUpload => {
     // file size validation
     if (fileToUpload.filesize > 512000) {

diff --git a/packages/react/src/components/FileUploader/stories/drop-container.js b/packages/react/src/components/FileUploader/stories/drop-container.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { settings } from 'carbon-components';
 import FileUploaderItem from '../FileUploaderItem';
 import FileUploaderDropContainer from '../FileUploaderDropContainer';
@@ -16,6 +16,20 @@ const { prefix } = settings;
 
 function ExampleDropContainerApp(props) {
   const [files, setFiles] = useState([]);
+  const handleDrop = e => {
+    e.preventDefault();
+  };
+  const handleDragover = e => {
+    e.preventDefault();
+  };
+  useEffect(() => {
+    document.addEventListener('drop', handleDrop);
+    document.addEventListener('dragover', handleDragover);
+    return () => {
+      document.removeEventListener('drop', handleDrop);
+      document.removeEventListener('dragover', handleDragover);
+    };
+  }, []);
   const uploadFile = async fileToUpload => {
     // file size validation
     if (fileToUpload.filesize > 512000) {