file uploading template

src/components/editors/EditorPanel/index.tsx

@@ -5,11 +5,12 @@ import { INode } from '~/redux/types';
 interface IProps {
   data: INode;
   setData: (val: INode) => void;
+  onUpload: (val: File[]) => void;
 };
 
 const EditorPanel: FC<IProps> = ({
 }) => (
     <div className={styles.panel} />
-  )
+  );
 
 export { EditorPanel };

src/components/editors/ImageEditor/index.tsx

@@ -5,14 +5,32 @@ import * as styles from './styles.scss';
 interface IProps {
   data: INode,
   setData: (val: INode) => void;
-};
+  onUpload: (val: File[]) => void;
+}
 
 const ImageEditor: FC<IProps> = ({
   data,
   setData,
+  onUpload,
 }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
 
+  const onDrop = useCallback(event => {
+    event.preventDefault();
+
+    if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
+
+    onUpload(event.dataTransfer.files);
+  }, [onUpload]);
+
+  const onInputChange = useCallback(event => {
+    event.preventDefault();
+
+    if (!event.target.files || !event.target.files.length) return;
+
+    onUpload(event.target.files);
+  }, [onUpload]);
+
   useEffect(() => {
     window.addEventListener("dragover", eventPreventer,false);
     window.addEventListener("drop",eventPreventer,false);
@@ -26,9 +44,10 @@ const ImageEditor: FC<IProps> = ({
   return (
     <form
       className={styles.uploads}
-      onDrop={e => { console.log(e.dataTransfer.files);}}
+      onDrop={onDrop}
     >
       <div>{data.type}</div>
+      <input type="file" onChange={onInputChange} />
     </form>
   );
 };

src/containers/dialogs/EditorDialog/index.tsx

@@ -11,23 +11,33 @@ import { connect } from 'react-redux';
 import { selectNode } from '~/redux/node/selectors';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { EditorPanel } from '~/components/editors/EditorPanel';
+import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
+import {uploadUploadFiles} from "~/redux/uploads/actions";
 
 const mapStateToProps = selectNode;
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
+};
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
+const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, uploadUploadFiles }) => {
   const [data, setData] = useState(editor);
+
   const setTitle = useCallback(title => {
     setData({ ...data, title });
   }, [setData, data]);
 
+  const onUpload = useCallback((files: File[]) => {
+    uploadUploadFiles(files, 'editor');
+  }, [uploadUploadFiles]);
+
   const buttons = (
     <Padder style={{ position: 'relative' }}>
       <EditorPanel
         data={data}
         setData={setData}
+        onUpload={onUpload}
       />
 
       <Group horizontal>
@@ -46,6 +56,7 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
         <ImageEditor
           data={data}
           setData={setData}
+          onUpload={onUpload}
         />
       </div>
     </ScrollDialog>

src/redux/store.ts

@@ -15,7 +15,7 @@ import nodeReducer, { INodeState } from "~/redux/node/reducer";
 import nodeSaga from "~/redux/node/sagas";
 
 import uploadReducer, { IUploadState } from "~/redux/uploads/reducer";
-import uploadSaga from "~/redux/node/sagas";
+import uploadSaga from "~/redux/uploads/sagas";
 
 import { IAuthState } from "~/redux/auth/types";
 

src/redux/uploads/actions.ts

@@ -0,0 +1,7 @@
+import {UPLOAD_ACTIONS} from "~/redux/uploads/constants";
+
+export const uploadUploadFiles = (files: File[], subject: string) => ({
+  files,
+  subject,
+  type: UPLOAD_ACTIONS.UPLOAD_FILES,
+});

src/redux/uploads/constants.ts

@@ -1,5 +1,11 @@
 import { IFile } from "~/redux/types";
 
+const prefix = 'UPLOAD.';
+
+export const UPLOAD_ACTIONS = {
+  UPLOAD_FILES: `${prefix}UPLOAD_FILES`,
+};
+
 export const EMPTY_FILE: IFile = {
   id: null,
   user_id: null,

src/redux/uploads/sagas.ts

@@ -1,3 +1,6 @@
-export default function* () {
+import {takeEvery} from "redux-saga/effects";
+import {UPLOAD_ACTIONS} from "~/redux/uploads/constants";
 
+export default function* () {
+  yield takeEvery(UPLOAD_ACTIONS.UPLOAD_FILES, console.log);
 }