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,25 +16,23 @@ interface CommentEditingFormProps {
   onCancelEdit?: () => void;
 }
 
-const CommentEditingForm: FC<CommentEditingFormProps> = ({
-  saveComment,
-  comment,
-  onCancelEdit,
-}) => {
-  const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments);
+const CommentEditingForm: FC<CommentEditingFormProps> = observer(
+  ({ saveComment, comment, onCancelEdit }) => {
+    const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments);
 
-  return (
-    <UploadDropzone onUpload={uploader.uploadFiles}>
-      <UploaderContextProvider value={uploader}>
-        <CommentForm
-          saveComment={saveComment}
-          comment={comment}
-          onCancelEdit={onCancelEdit}
-          allowUploads
-        />
-      </UploaderContextProvider>
-    </UploadDropzone>
-  );
-};
+    return (
+      <UploadDropzone onUpload={uploader.uploadFiles}>
+        <UploaderContextProvider value={uploader}>
+          <CommentForm
+            saveComment={saveComment}
+            comment={comment}
+            onCancelEdit={onCancelEdit}
+            allowUploads
+          />
+        </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}>
-      {({ getRootProps, isDragActive }) => (
+    <Dropzone onDrop={onDrop} noClick>
+      {({ getRootProps, isDragActive, getInputProps }) => (
         <div
           {...getRootProps({
             ...rest,
             className: classnames(styles.zone),
           })}
         >
+          <input {...getInputProps()} />
+
           {children}
+
           <div
             className={classNames(styles.helper, helperClassName, {
               [styles.active]: isDragActive || isDraggingOnBody,