fix file uploads on comments

src/components/comment/CommentEditingForm/index.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { CommentForm } from '~/components/comment/CommentForm';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
@@ -14,11 +16,8 @@ interface CommentEditingFormProps {
   onCancelEdit?: () => void;
 }
 
-const CommentEditingForm: FC<CommentEditingFormProps> = ({
+const CommentEditingForm: FC<CommentEditingFormProps> = observer(
-  saveComment,
+  ({ saveComment, comment, onCancelEdit }) => {
-  comment,
-  onCancelEdit,
-}) => {
     const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments);
 
     return (
@@ -33,6 +32,7 @@ const CommentEditingForm: FC<CommentEditingFormProps> = ({
         </UploaderContextProvider>
       </UploadDropzone>
     );
-};
+  },
+);
 
 export { CommentEditingForm };

src/components/upload/UploadDropzone/index.tsx

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import classNames from 'classnames';
 import Dropzone from 'react-dropzone';
 
-
 import { DropHereIcon } from '~/components/input/DropHereIcon';
 import { useDragDetector } from '~/hooks/dom/useDragDetector';
 import { DivProps } from '~/utils/types';
@@ -16,26 +15,34 @@ interface IProps extends DivProps {
   helperClassName?: string;
 }
 
-const UploadDropzone: FC<IProps> = ({ children, onUpload, helperClassName, ...rest }) => {
+const UploadDropzone: FC<IProps> = ({
+  children,
+  onUpload,
+  helperClassName,
+  ...rest
+}) => {
   const { isDragging: isDraggingOnBody, onStopDragging } = useDragDetector();
   const onDrop = useCallback(
     (files: File[]) => {
       onStopDragging();
       onUpload(files);
     },
-    [onStopDragging, onUpload]
+    [onStopDragging, onUpload],
   );
 
   return (
-    <Dropzone onDrop={onDrop}>
+    <Dropzone onDrop={onDrop} noClick>
-      {({ getRootProps, isDragActive }) => (
+      {({ getRootProps, isDragActive, getInputProps }) => (
         <div
           {...getRootProps({
             ...rest,
             className: classnames(styles.zone),
           })}
         >
+          <input {...getInputProps()} />
+
           {children}
+
           <div
             className={classNames(styles.helper, helperClassName, {
               [styles.active]: isDragActive || isDraggingOnBody,

src/containers/node/NodeCommentForm/index.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { CommentForm } from '~/components/comment/CommentForm';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
@@ -16,7 +18,7 @@ export interface Props {
   saveComment: (comment: IComment) => Promise<IComment | undefined>;
 }
 
-const NodeCommentForm: FC<Props> = ({ saveComment }) => {
+const NodeCommentForm: FC<Props> = observer(({ saveComment }) => {
   const { user, isUser } = useAuth();
   const showLoginDialog = useShowModal(Dialog.Login);
 
@@ -42,6 +44,6 @@ const NodeCommentForm: FC<Props> = ({ saveComment }) => {
       </UploaderContextProvider>
     </UploadDropzone>
   );
-};
+});
 
 export { NodeCommentForm };