Merge pull request #100 from rclone/uploadfile

Add upload file feature in explorer.

package.json

@@ -34,8 +34,8 @@
     "react-autosuggest": "^10.0.0",
     "react-awesome-player": "^1.0.11",
     "react-chartjs-2": "^2.9.0",
-    "react-dnd": "^7.7.0",
-    "react-dnd-html5-backend": "^7.7.0",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.12.0",
     "react-in-viewport": "0.0.38",
     "react-redux": "^7.1.3",
@@ -58,8 +58,8 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
     "fetch-mock": "^9.4.0",
-    "react-dnd-test-backend": "^7.7.0",
-    "react-dnd-test-utils": "^7.4.4",
+    "react-dnd-test-backend": "^11.1.3",
+    "react-dnd-test-utils": "^11.1.3",
     "react-scripts": "^3.3.1",
     "redux-mock-store": "^1.5.4"
   },

src/index.js

@@ -17,4 +17,4 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();

src/scss/_custom.scss

@@ -370,3 +370,10 @@ body{
   -ms-transform: rotate(270deg) translateX(-100%);
 }
 
+.upload-box {
+  height: 150px;
+  border: 2px darkgray dashed;
+  background: rgba(211, 211, 211, 0.23);
+  color: rgb(101, 101, 101);
+}
+

src/utils/testData.js

@@ -352,4 +352,13 @@ export const FILE_ITEM_DATA = {
     MimeType: 'application/octet-stream',
     ModTime: '2019-06-07T22:44:37.357539000+05:30',
     IsDir: false
+};
+
+export const DIR_ITEM_DATA = {
+    Path: 'abc',
+    Name: 'abc',
+    Size: 0,
+    MimeType: '',
+    ModTime: '2019-06-07T22:44:37.357539000+05:30',
+    IsDir: true
 };

src/views/Base/DropOverlay/DropOverlay.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const DropOverlay = (props) => (<div data-test="dropOverlay"
+                                     style={{
+                                         position: 'absolute',
+                                         top: 0,
+                                         left: 0,
+                                         height: '100%',
+                                         width: '100%',
+                                         zIndex: 1,
+                                         opacity: 0.5,
+                                         backgroundColor: 'gray',
+                                     }}
+/>);
+
+export default DropOverlay;

src/views/Base/DropOverlay/DropOverlay.test.js

@@ -0,0 +1,36 @@
+import React from "react";
+import {shallow} from "enzyme";
+import toJson from "enzyme-to-json";
+import DropOverlay from "./DropOverlay";
+import {findByTestAttr, testStore} from "../../../../Utils";
+
+
+const setUp = (intialState = {}, props = {}) => {
+        const store = testStore(intialState);
+
+        const component = shallow(<DropOverlay {...props} store={store}/>);
+        return component;
+};
+
+
+describe('Drop Overlay', function () {
+        describe('renders', function () {
+                let wrapper;
+                beforeEach(() => {
+                        const initialState = {};
+
+                        const props = {};
+                        wrapper = setUp(initialState, props)
+                });
+
+                it('should render without crashing', function () {
+                        const component = findByTestAttr(wrapper, "dropOverlay");
+                        expect(component).toHaveLength(1);
+                });
+
+                it('should match snapshot', function () {
+                        expect(toJson(wrapper)).toMatchSnapshot();
+                });
+
+        });
+});

src/views/Base/DropOverlay/__snapshots__/DropOverlay.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Drop Overlay renders should match snapshot 1`] = `
+<div
+  data-test="dropOverlay"
+  style={
+    Object {
+      "backgroundColor": "gray",
+      "height": "100%",
+      "left": 0,
+      "opacity": 0.5,
+      "position": "absolute",
+      "top": 0,
+      "width": "100%",
+      "zIndex": 1,
+    }
+  }
+/>
+`;

src/views/Base/FileOperations/FileOperations.js

@@ -38,7 +38,8 @@ import {toast} from "react-toastify";
 import {PROP_FS_INFO} from "../../../utils/RclonePropTypes";
 import newFolderImg from '../../../assets/img/new-folder.png';
 import {cleanTrashForRemote} from "rclone-api";
-import {createSelector} from "reselect"; // with import
+import {createSelector} from "reselect";
+import FileUploadModal from "./FileUploadModal"; // with import
 
 function getUrl(currentPath) {
 	const {remoteName, remotePath} = currentPath;
@@ -195,11 +196,6 @@ class FileOperations extends React.Component {
 			changePath(containerID, urlSplits[0], urlSplits[1])
 	}
 
-	getLg = (n) => {
-		const {numCols} = this.props;
-		return Math.abs(n * numCols);
-	}
-
 	render() {
 		const {containerID, getFilesForContainerID, gridMode, navigateFwd, navigateBack, searchQuery, currentPath, doughnutData} = this.props;
 		const {newFolderModalIsVisible, dropdownOpen, isAboutModalOpen, searchOpen, tempUrl, isUrlBarFocused} = this.state;
@@ -273,7 +269,8 @@ class FileOperations extends React.Component {
 					<UncontrolledTooltip placement="right" target="InfoButton">
 						Show Remote Info
 					</UncontrolledTooltip>
-
+					<FileUploadModal currentPath={currentPath} buttonLabel={"Upload"}
+									 buttonClass={"btn-explorer-action"}/>
 					<Form inline>
 						<FormGroup>
 							{searchOpen && <Input type="text" placeholder="Search" value={searchQuery}

src/views/Base/FileOperations/FileUploadBox.js

@@ -0,0 +1,36 @@
+import {NativeTypes} from 'react-dnd-html5-backend'
+import {useDrop} from 'react-dnd'
+import React from "react";
+import DropOverlay from "../DropOverlay/DropOverlay";
+import * as PropTypes from 'prop-types';
+
+
+export const FileUploadBox = (props) => {
+    const {onDrop} = props
+    const [{canDrop, isOver}, drop] = useDrop({
+        accept: [NativeTypes.FILE],
+        drop(item, monitor) {
+            if (onDrop) {
+                onDrop(props, monitor)
+            }
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    })
+    const isActive = canDrop && isOver
+    return (
+        <div ref={drop}>
+            {/*Display overlay if file is about to be dropped*/}
+            {isActive && <DropOverlay/>}
+            {props.children}
+        </div>
+    )
+}
+
+FileUploadBox.propTypes = {
+    onDrop: PropTypes.func
+}
+
+export default FileUploadBox;