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,16 +180,42 @@ export default function ActionEditor({
 
           <TabPanel value={value} index={1}>
             <div className="flex items-center justify-between">
+              <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 className="">
+                    <CircularProgress />
+                  </div>
+                )}
+              </div>
+
               <input
+                ref={imageRef}
                 type="file"
-                className="mb-4 select-none"
+                className="mb-4 hidden select-none"
                 onChange={async (e) => await handleFileChange(e, "image")}
               />
-              {loading && (
-                <div>
-                  <CircularProgress className="-mt-4" />
-                </div>
-              )}
             </div>
 
             <TextField