improved file input

src/widgets/action-editor/ui/ActionEditor.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { uploadFile } from "@/shared/lib/uploadFile";
 import type { CommentAction } from "@/entities/action/schema";
 import { getActionAttachmentType } from "@/entities/action/lib";
@@ -58,6 +58,7 @@ export default function ActionEditor({
   onClose,
   canExit = false,
 }: ActionEditorProps) {
+  const imageRef = useRef<HTMLInputElement>(null);
   const attachmentType = initialAction
     ? getActionAttachmentType(initialAction)
     : "empty";
@@ -179,18 +180,44 @@ export default function ActionEditor({
 
           <TabPanel value={value} index={1}>
             <div className="flex items-center justify-between">
-              <input
-                type="file"
-                className="mb-4 select-none"
-                onChange={async (e) => await handleFileChange(e, "image")}
+              <div className="mb-9 flex w-full items-center justify-between">
+                <div className="flex items-center gap-x-10">
+                  <Button
+                    variant="contained"
+                    type="submit"
+                    disabled={loading}
+                    onClick={() => {
+                      if (!imageRef.current) return;
+                      imageRef.current.click();
+                    }}
+                  >
+                    {imageUrl === null ? "Добавить фото" : "Изменить фото"}
+                  </Button>
+                  {imageUrl && (
+                    <img
+                      src={imageUrl}
+                      alt="Current image"
+                      className="w-20 select-none"
+                      draggable={false}
                     />
+                  )}
+                </div>
+
                 {loading && (
-                <div>
-                  <CircularProgress className="-mt-4" />
+                  <div className="">
+                    <CircularProgress />
                   </div>
                 )}
               </div>
 
+              <input
+                ref={imageRef}
+                type="file"
+                className="mb-4 hidden select-none"
+                onChange={async (e) => await handleFileChange(e, "image")}
+              />
+            </div>
+
             <TextField
               fullWidth
               multiline