Fix Bug 57339 - Client.Files.Upload.Dragndrop. The file does not load when dragging it to the left menu folder

products/ASC.Files/Client/src/components/Article/Body/Items.js

@@ -1,13 +1,111 @@
 import React from "react";
+import styled from "styled-components";
 import PropTypes from "prop-types";
 import { inject, observer } from "mobx-react";
 import CatalogItem from "@appserver/components/catalog-item";
 import { FolderType, ShareAccessRights } from "@appserver/common/constants";
 import { withTranslation } from "react-i18next";
+import DragAndDrop from "@appserver/components/drag-and-drop";
 import withLoader from "../../../HOCs/withLoader";
 import Loaders from "@appserver/common/components/Loaders";
 import Loader from "@appserver/components/loader";
 
+const StyledDragAndDrop = styled(DragAndDrop)`
+  display: contents;
+`;
+
+const Item = ({
+  t,
+  item,
+  dragging,
+  getFolderIcon,
+  isActive,
+  getEndOfBlock,
+  showText,
+  onClick,
+  onMoveTo,
+  onBadgeClick,
+  showDragItems,
+  startUpload,
+  setDragging,
+}) => {
+  const [isDragActive, setIsDragActive] = React.useState(false);
+
+  const showBadge = item.newItems ? item.newItems > 0 && true : false;
+
+  const isDragging = dragging ? showDragItems(item) : false;
+
+  let value = "";
+  if (isDragging) value = `${item.id} dragging`;
+
+  const onDropZoneUpload = React.useCallback(
+    (files, uploadToFolder) => {
+      dragging && setDragging(false);
+      startUpload(files, uploadToFolder, t);
+    },
+    [t, dragging, setDragging, startUpload]
+  );
+
+  const onDrop = React.useCallback(
+    (items) => {
+      if (!isDragging) return dragging && setDragging(false);
+
+      const { fileExst, id } = item;
+
+      if (!fileExst) {
+        onDropZoneUpload(items, id);
+      } else {
+        onDropZoneUpload(items);
+      }
+    },
+    [item, startUpload, dragging, setDragging]
+  );
+
+  const onDragOver = React.useCallback(
+    (dragActive) => {
+      if (dragActive !== isDragActive) {
+        setIsDragActive(dragActive);
+      }
+    },
+    [isDragActive]
+  );
+
+  const onDragLeave = React.useCallback(() => {
+    setIsDragActive(false);
+  }, []);
+
+  return (
+    <StyledDragAndDrop
+      key={item.id}
+      data-title={item.title}
+      value={value}
+      onDrop={onDrop}
+      dragging={dragging && isDragging}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+    >
+      <CatalogItem
+        key={item.id}
+        id={item.id}
+        className={`tree-drag ${item.folderClassName}`}
+        icon={getFolderIcon(item)}
+        showText={showText}
+        text={item.title}
+        isActive={isActive(item)}
+        onClick={onClick}
+        onDrop={onMoveTo}
+        isEndOfBlock={getEndOfBlock(item)}
+        isDragging={isDragging}
+        isDragActive={isDragActive && isDragging}
+        value={value}
+        showBadge={showBadge}
+        labelBadge={showBadge ? item.newItems : null}
+        onClickBadge={onBadgeClick}
+      />
+    </StyledDragAndDrop>
+  );
+};
+
 const Items = ({
   t,
   data,
@@ -18,6 +116,9 @@ const Items = ({
   onBadgeClick,
 
   dragging,
+  setDragging,
+  startUpload,
+
   isAdmin,
   myId,
   commonId,
@@ -165,37 +266,30 @@ const Items = ({
 
   const getItem = React.useCallback(
     (data) => {
-      const items = data.map((item) => {
-        const showBadge = item.newItems ? item.newItems > 0 && true : false;
-
-        const isDragging = dragging ? showDragItems(item) : false;
-
-        let value = "";
-        if (isDragging) value = `${item.id} dragging`;
-
+      const items = data.map((item, index) => {
         return (
-          <CatalogItem
-            key={item.id}
-            id={item.id}
-            className={`tree-drag ${item.folderClassName}`}
-            icon={getFolderIcon(item)}
+          <Item
+            key={`${item.id}_${index}`}
+            t={t}
+            setDragging={setDragging}
+            startUpload={startUpload}
+            item={item}
+            dragging={dragging}
+            getFolderIcon={getFolderIcon}
+            isActive={isActive}
+            getEndOfBlock={getEndOfBlock}
             showText={showText}
-            text={item.title}
-            isActive={isActive(item)}
             onClick={onClick}
-            onDrop={onMoveTo}
-            isEndOfBlock={getEndOfBlock(item)}
-            isDragging={isDragging}
-            value={value}
-            showBadge={showBadge}
-            labelBadge={showBadge ? item.newItems : null}
-            onClickBadge={onBadgeClick}
+            onMoveTo={onMoveTo}
+            onBadgeClick={onBadgeClick}
+            showDragItems={showDragItems}
           />
         );
       });
       return items;
     },
     [
+      t,
       dragging,
       getFolderIcon,
       isActive,
@@ -205,6 +299,8 @@ const Items = ({
       onBadgeClick,
       showDragItems,
       showText,
+      setDragging,
+      startUpload,
     ]
   );
 
@@ -226,9 +322,12 @@ export default inject(
     selectedFolderStore,
     filesStore,
     filesActionsStore,
+    uploadDataStore,
   }) => {
     const { selection, dragging, setDragging, setStartDrag } = filesStore;
 
+    const { startUpload } = uploadDataStore;
+
     const {
       selectedTreeNode,
       treeFolders,
@@ -254,6 +353,7 @@ export default inject(
       setDragging,
       setStartDrag,
       moveDragItems: filesActionsStore.moveDragItems,
+      startUpload,
     };
   }
 )(withTranslation(["Home", "Common", "Translations"])(observer(Items)));