processing#1417 Add temporary fix to drag drop files

ron-debajyoti · Mar 3, 2021 · 5bcda52 · 5bcda52
1 parent 2eb1670
commit 5bcda52
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 58 deletions.
diff --git a/client/constants.js b/client/constants.js
@@ -145,3 +145,5 @@ export const STOP_LOADING = 'STOP_LOADING';
 
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
+
+export const SET_PARENT_ID = 'SET_PARENT_ID';
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
@@ -64,6 +64,13 @@ export function resetSelectedFile(previousId) {
   };
 }
 
+export function setParentId(parentId) {
+  return {
+    type: ActionTypes.SET_PARENT_ID,
+    parentId
+  };
+}
+
 export function newFile(parentId) {
   return {
     type: ActionTypes.SHOW_MODAL,

diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js
@@ -1,7 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import getConfig from '../../../utils/getConfig';
 import { handleCreateFile } from './files';
-import { newFile } from './ide';
 import { TEXT_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
 const s3BucketHttps =
@@ -136,38 +135,3 @@ export function dropzoneCompleteCallback(elementId, file) {
     }
   };
 }
-
-export function dropzoneCompleteCallbackAid(elementId, parentId, file) {
-  return (dispatch) => { // eslint-disable-line
-    dispatch(newFile(parentId));
-    if (
-      (!file.name.match(TEXT_FILE_REGEX) || file.size >= MAX_LOCAL_FILE_SIZE) &&
-      file.status !== 'error'
-    ) {
-      let inputHidden = '<input type="hidden" name="attachments[]" value="';
-      const json = {
-        url: `${s3BucketHttps}${file.postData.key}`,
-        originalFilename: file.name
-      };
-
-      let jsonStr = JSON.stringify(json);
-
-      // convert the json string to binary data so that btoa can encode it
-      jsonStr = toBinary(jsonStr);
-      inputHidden += `${window.btoa(jsonStr)}" />`;
-      document.getElementById(elementId).innerHTML += inputHidden;
-
-      const formParams = {
-        name: file.name,
-        url: `${s3BucketHttps}${file.postData.key}`
-      };
-      dispatch(handleCreateFile(formParams, false));
-    } else if (file.content !== undefined) {
-      const formParams = {
-        name: file.name,
-        content: file.content
-      };
-      dispatch(handleCreateFile(formParams, false));
-    }
-  };
-}
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
@@ -105,9 +105,26 @@ class FileNode extends React.Component {
   handleFileClick = (event) => {
     event.stopPropagation();
     const { isDeleting } = this.state;
-    const { id, setSelectedFile, name, onClickFile } = this.props;
+    const {
+      id,
+      parentId,
+      setSelectedFile,
+      fileType,
+      setParentId,
+      name,
+      onClickFile
+    } = this.props;
     if (name !== 'root' && !isDeleting) {
-      setSelectedFile(id);
+      console.log(parentId);
+      console.log(id);
+      if (fileType !== 'folder') {
+        setParentId(parentId);
+        setSelectedFile(id);
+      } else {
+        console.log('called here');
+        setParentId(id);
+        setSelectedFile(id);
+      }
     }
 
     // debugger; // eslint-disable-line
@@ -413,6 +430,7 @@ FileNode.propTypes = {
   isSelectedFile: PropTypes.bool,
   isFolderClosed: PropTypes.bool,
   setSelectedFile: PropTypes.func.isRequired,
+  setParentId: PropTypes.func.isRequired,
   deleteFile: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
   resetSelectedFile: PropTypes.func.isRequired,

diff --git a/client/modules/IDE/components/FileNode.stories.jsx b/client/modules/IDE/components/FileNode.stories.jsx
@@ -15,6 +15,7 @@ export const Show = () => (
     name="File name"
     fileType="jpeg"
     isSelectedFile
+    setParentId={action('setParentId')}
     isFolderClosed={false}
     setSelectedFile={action('setSelectedFile')}
     deleteFile={action('deleteFile')}

diff --git a/client/modules/IDE/components/FileNode.test.jsx b/client/modules/IDE/components/FileNode.test.jsx
@@ -33,6 +33,7 @@ describe('<FileNode />', () => {
       canEdit: true,
       children: [],
       authenticated: false,
+      setParentId: jest.fn(),
       setSelectedFile: jest.fn(),
       deleteFile: jest.fn(),
       updateFileName: jest.fn(),

diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
@@ -28,8 +28,7 @@ class Sidebar extends React.Component {
     this.onFocusComponent = this.onFocusComponent.bind(this);
 
     this.state = {
-      isFocused: false,
-      rootFile: props.files.filter((file) => file.name === 'root')[0]
+      isFocused: false
     };
   }
 
@@ -66,16 +65,14 @@ class Sidebar extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       acceptedFiles: fileExtensionsAndMimeTypes,
-      dictDefaultMessage: this.props.t(''),
+      dictDefaultMessage: this.props.t('FileUploader.DictDefaultMessage'),
       accept: this.props.dropzoneAcceptCallback.bind(this, userId),
-      complete: this.props.dropzoneCompleteCallbackAid.bind(
-        this,
-        elementId,
-        this.state.rootFile.id
-      ),
-      sending: this.props.dropzoneSendingCallback
+      sending: this.props.dropzoneSendingCallback,
+      complete: (file) => {
+        this.props.dropzoneCompleteCallback(elementId, file);
+        this.uploader.removeFile(file);
+      }
     });
-    this.uploader.removeAllFiles();
   }
 
   resetSelectedFile() {
@@ -115,6 +112,7 @@ class Sidebar extends React.Component {
       'sidebar--project-options': this.props.projectOptionsVisible,
       'sidebar--cant-edit': !canEditProject
     });
+    const rootFile = this.props.files.filter((file) => file.name === 'root')[0];
     return (
       <section className={sidebarClass}>
         <header
@@ -144,7 +142,7 @@ class Sidebar extends React.Component {
                   <button
                     aria-label={this.props.t('Sidebar.AddFolderARIA')}
                     onClick={() => {
-                      this.props.newFolder(this.state.rootFile.id);
+                      this.props.newFolder(rootFile.id);
                       setTimeout(this.props.closeProjectOptions, 0);
                     }}
                     onBlur={this.onBlurComponent}
@@ -157,7 +155,7 @@ class Sidebar extends React.Component {
                   <button
                     aria-label={this.props.t('Sidebar.AddFileARIA')}
                     onClick={() => {
-                      this.props.newFile(this.state.rootFile.id);
+                      this.props.newFile(rootFile.id);
                       setTimeout(this.props.closeProjectOptions, 0);
                     }}
                     onBlur={this.onBlurComponent}
@@ -171,7 +169,7 @@ class Sidebar extends React.Component {
                     <button
                       aria-label={this.props.t('Sidebar.UploadFileARIA')}
                       onClick={() => {
-                        this.props.openUploadFileModal(this.state.rootFile.id);
+                        this.props.openUploadFileModal(rootFile.id);
                         setTimeout(this.props.closeProjectOptions, 0);
                       }}
                       onBlur={this.onBlurComponent}
@@ -185,10 +183,7 @@ class Sidebar extends React.Component {
             </div>
           </div>
         </header>
-        <ConnectedFileNode
-          id={this.state.rootFile.id}
-          canEdit={canEditProject}
-        />
+        <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
         <div className="uploaderAid dropzone" id="uploaderAid"></div>
       </section>
     );
@@ -220,7 +215,7 @@ Sidebar.propTypes = {
   t: PropTypes.func.isRequired,
   dropzoneAcceptCallback: PropTypes.func.isRequired,
   dropzoneSendingCallback: PropTypes.func.isRequired,
-  dropzoneCompleteCallbackAid: PropTypes.func.isRequired
+  dropzoneCompleteCallback: PropTypes.func.isRequired
 };
 
 Sidebar.defaultProps = {

diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
@@ -45,6 +45,8 @@ const ide = (state = initialState, action) => {
         parentId: action.parentId,
         newFolderModalVisible: false
       });
+    case ActionTypes.SET_PARENT_ID:
+      return Object.assign({}, state, { parentId: action.parentId });
     case ActionTypes.HIDE_MODAL:
       return Object.assign({}, state, { modalIsVisible: false });
     case ActionTypes.COLLAPSE_SIDEBAR:

diff --git a/client/styles/components/_uploader.scss b/client/styles/components/_uploader.scss
@@ -17,8 +17,9 @@
 
 .uploaderAid {
   display: flex;
-  width: 100%;
-  height: 100%;
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 60%;
   flex-flow: column wrap;
   z-index: 2;
   opacity: 0.5;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -145,3 +145,5 @@ export const STOP_LOADING = 'STOP_LOADING';

		export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
		export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';

		export const SET_PARENT_ID = 'SET_PARENT_ID';