add files thumbnail (#3903)

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -50,6 +50,7 @@ const propTypes = {
   enableDirPrivateShare: PropTypes.bool.isRequired,
   showDirentDetail: PropTypes.func.isRequired,
   onItemsMove: PropTypes.func.isRequired,
+  onShowDirentsDraggablePreview: PropTypes.func,
 };
 
 class DirentListItem extends React.Component {
@@ -362,14 +363,11 @@ class DirentListItem extends React.Component {
     if (Utils.isIEBrower()) {
       return false;
     }
-
     e.dataTransfer.effectAllowed = 'move';
-    if (e.dataTransfer && e.dataTransfer.setDragImage) {
-      e.dataTransfer.setDragImage(this.refs.drag_icon, 15, 15);
-    }
-
     let { selectedDirentList } = this.props;
     if (selectedDirentList.length > 0 && selectedDirentList.includes(this.props.dirent)) { // drag items and selectedDirentList include item
+      this.props.onShowDirentsDraggablePreview();
+      e.dataTransfer.setDragImage(this.refs.empty_content, 0, 0); // Show an empty content
       let selectedList =  selectedDirentList.map(item => {
         let nodeRootPath = this.getDirentPath(item);
         let dragStartItemData = {nodeDirent: item, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
@@ -380,6 +378,10 @@ class DirentListItem extends React.Component {
       return ;
     }
 
+    if (e.dataTransfer && e.dataTransfer.setDragImage) {
+      e.dataTransfer.setDragImage(this.refs.drag_icon, 15, 15);
+    }
+
     let nodeRootPath = this.getDirentPath(this.props.dirent);
     let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
     dragStartItemData = JSON.stringify(dragStartItemData);
@@ -426,6 +428,8 @@ class DirentListItem extends React.Component {
     }
     if (this.props.dirent.type === 'dir') {
       e.stopPropagation();
+    } else {
+      return;
     }
     let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
     dragStartItemData = JSON.parse(dragStartItemData);
@@ -451,10 +455,6 @@ class DirentListItem extends React.Component {
       return;
     }
 
-    if (dropItemData.type !== 'dir') {
-      return;
-    } 
-
     //  copy the dirent to it's child. eg: A/B -> A/B/C
     if (dropItemData.type === 'dir' && nodeDirent.type === 'dir') {
       if (nodeParentPath !== this.props.path) {
@@ -590,7 +590,7 @@ class DirentListItem extends React.Component {
       <Fragment>
         <tr 
           className={trClass} 
-          draggable="true" 
+          draggable="true"
           onMouseEnter={this.onMouseEnter} 
           onMouseOver={this.onMouseOver} 
           onMouseLeave={this.onMouseLeave} 
@@ -617,6 +617,7 @@ class DirentListItem extends React.Component {
                 <img ref='drag_icon' src={iconUrl} width="24" alt='' />
               }
               {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
+              <div ref="empty_content" style={{position: 'absolute', width: '1px', height: '1px'}}></div>
             </div>
           </td>
           <td className="name">

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -17,6 +17,7 @@ import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import DirentListItem from './dirent-list-item';
 import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
+import DirentsDraggedPreview from '../draggable/dirents-dragged-preview';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -69,6 +70,7 @@ class DirentListView extends React.Component {
       isMutipleOperation: true,
       activeDirent: null,
       isListDropTipShow: false,
+      isShowDirentsDraggablePreview: false,
     };
 
     this.enteredCounter = 0; // Determine whether to enter the child element to avoid dragging bubbling bugs。
@@ -567,6 +569,9 @@ class DirentListView extends React.Component {
     }
     this.enteredCounter++;
     if (this.enteredCounter !== 0) {
+      if (this.state.isListDropTipShow) {
+        return ;
+      }
       this.setState({isListDropTipShow: true});
     }
   }
@@ -619,6 +624,18 @@ class DirentListView extends React.Component {
     this.props.onItemMove(this.props.currentRepoInfo, nodeDirent, this.props.path, nodeParentPath);
   }
 
+  onShowDirentsDraggablePreview = () => {
+    this.setState({
+      isShowDirentsDraggablePreview: true,
+    });
+  }
+
+  onHideDirentsDraggablePreview = () => {
+    this.setState({
+      isShowDirentsDraggablePreview: false
+    });
+  }
+
   render() {
     const { direntList, sortBy, sortOrder } = this.props;
 
@@ -694,6 +711,7 @@ class DirentListView extends React.Component {
                   getDirentItemMenuList={this.getDirentItemMenuList}
                   showDirentDetail={this.props.showDirentDetail}
                   onItemsMove={this.props.onItemsMove}
+                  onShowDirentsDraggablePreview={this.onShowDirentsDraggablePreview}
                 />
               );
             })}
@@ -714,6 +732,15 @@ class DirentListView extends React.Component {
             id={'dirents-menu'}
             onMenuItemClick={this.onDirentsMenuItemClick}
           />
+          {this.state.isShowDirentsDraggablePreview && 
+            <ModalPortal>
+              <DirentsDraggedPreview 
+                selectedDirentList={this.props.selectedDirentList}
+                onHideDirentsDraggablePreview={this.onHideDirentsDraggablePreview}
+                dragStartPosition={this.state.dragStartPosition}
+              />
+            </ModalPortal>
+          }
           {this.state.isImagePopupOpen && (
             <ModalPortal>
               <ImageDialog