diff --git a/src/components/editors/EditorPanel/index.tsx b/src/components/editors/EditorPanel/index.tsx index 9d0c753c..ca82721b 100644 --- a/src/components/editors/EditorPanel/index.tsx +++ b/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 = ({ }) => (
- ) + ); -export { EditorPanel }; \ No newline at end of file +export { EditorPanel }; diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index 05cec4f0..ab077ecf 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/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 = ({ 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 = ({ return (
{ console.log(e.dataTransfer.files);}} + onDrop={onDrop} >
{data.type}
+
); }; diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index db059871..eb92b026 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/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 mapDispatchToProps & {}; -const EditorDialogUnconnected: FC = ({ onRequestClose, editor }) => { +const EditorDialogUnconnected: FC = ({ 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 = ( @@ -46,6 +56,7 @@ const EditorDialogUnconnected: FC = ({ onRequestClose, editor }) => {
diff --git a/src/redux/store.ts b/src/redux/store.ts index 276bcdf1..307fbecd 100644 --- a/src/redux/store.ts +++ b/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"; diff --git a/src/redux/uploads/actions.ts b/src/redux/uploads/actions.ts new file mode 100644 index 00000000..33d2045c --- /dev/null +++ b/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, +}); diff --git a/src/redux/uploads/constants.ts b/src/redux/uploads/constants.ts index 770c4179..231ebdf8 100644 --- a/src/redux/uploads/constants.ts +++ b/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, @@ -11,4 +17,4 @@ export const EMPTY_FILE: IFile = { size: 2400000, type: 'image', mime: 'image/jpeg', -}; \ No newline at end of file +}; diff --git a/src/redux/uploads/sagas.ts b/src/redux/uploads/sagas.ts index 4806adc2..a3ec41e5 100644 --- a/src/redux/uploads/sagas.ts +++ b/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"; -} \ No newline at end of file +export default function* () { + yield takeEvery(UPLOAD_ACTIONS.UPLOAD_FILES, console.log); +}