UPload Image

import { Edit, useForm } from "@refinedev/antd";  
import { getValueProps, mediaUploadMapper } from "@refinedev/strapi-v4";  
import { Form, Upload } from "antd";  
  
import { TOKEN_KEY, API_URL } from "../../constants";  
import { IPost } from "../interfaces";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>({  
 metaData: { populate: ["cover"] },  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form  
 {...formProps}  
 layout="vertical"  
 onFinish={(values) => {  
 formProps.onFinish?.(mediaUploadMapper(values));  
 }}  
 >  
 <Form.Item label="Cover">  
 <Form.Item  
 name="cover"  
 valuePropName="fileList"  
 getValueProps={(data) => getValueProps(data, API_URL)}  
 noStyle  
 >  
 <Upload.Dragger  
 name="files"  
 action={`${API_URL}/api/upload`}  
 headers={{  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 }}  
 listType="picture"  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

import { Edit, useForm } from "@refinedev/antd";  
import { getValueProps, mediaUploadMapper } from "@refinedev/strapi-v4";  
import { Form, Upload } from "antd";  
  
import { TOKEN_KEY, API_URL } from "../../constants";  
import { IPost } from "../interfaces";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>({  
 metaData: { populate: ["cover"] },  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form  
 {...formProps}  
 layout="vertical"  
 onFinish={(values) => {  
 formProps.onFinish?.(mediaUploadMapper(values));  
 }}  
 >  
 <Form.Item label="Cover">  
 <Form.Item  
 name="cover"  
 valuePropName="fileList"  
 getValueProps={(data) => getValueProps(data, API_URL)}  
 noStyle  
 >  
 <Upload.Dragger  
 name="files"  
 action={`${API_URL}/api/upload`}  
 headers={{  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 }}  
 listType="picture"  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
    },
  },
};

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
    },
  },
};

module.exports = {
  load: {
    before: ['strapi::errors', 'strapi::security', 'strapi::cors'],
    order: [
      "Define the middlewares' load order by putting their name in this array is the right order",
    ],
    after: ['strapi::poweredBy', 'strapi::logger', 'strapi::query', 'strapi::body', 'strapi::session', 'strapi::favicon', 'strapi::public'],
  },
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
    },
  },
};

module.exports = {
  load: {
    before: ['strapi::errors', 'strapi::security', 'strapi::cors'],
    order: [
      "Define the middlewares' load order by putting their name in this array is the right order",
    ],
    after: ['strapi::poweredBy', 'strapi::logger', 'strapi::query', 'strapi::body', 'strapi::session', 'strapi::favicon', 'strapi::public'],
  },
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
    },
  },
};

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
    },
  },
};

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
    },
  },
};

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
      headers: ['Content-Type', 'Authorization', 'X-Requested-With', 'Origin', 'Accept'],
    },
  },
};

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['<http://localhost:5173'],>
      headers: ['Content-Type', 'Authorization', 'X-Requested-With', 'Origin', 'Accept'],
    },
  },
};

import {  
 useApiUrl,  
} from "@refinedev/core";  
import {  
 getValueFromEvent,  
 Edit,  
 useForm,  
} from "@refinedev/antd";  
import {  
 Upload,  
 Form,  
 Input,  
} from "antd";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 const apiUrl = useApiUrl();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item label="Image">  
 <Form.Item  
 name="image"  
 valuePropName="fileList"  
 getValueFromEvent={getValueFromEvent}  
 noStyle  
 >  
 <Upload.Dragger  
 name="file"  
 action={`${apiUrl}/media/upload`}  
 listType="picture"  
 maxCount={5}  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  

import {  
 useApiUrl,  
} from "@refinedev/core";  
import {  
 getValueFromEvent,  
 Edit,  
 useForm,  
} from "@refinedev/antd";  
import {  
 Upload,  
 Form,  
 Input,  
} from "antd";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 const apiUrl = useApiUrl();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item label="Image">  
 <Form.Item  
 name="image"  
 valuePropName="fileList"  
 getValueFromEvent={getValueFromEvent}  
 noStyle  
 >  
 <Upload.Dragger  
 name="file"  
 action={`${apiUrl}/media/upload`}  
 listType="picture"  
 maxCount={5}  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  

import { Edit, useForm } from "@pankod/refine";
import { Upload, Form, Input } from "antd";

export const PostEdit: React.FC = () => {
    const { formProps, saveButtonProps } = useForm();

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item label="Title" name="title">
                    <Input />
                </Form.Item>
                <Form.Item label="Image" name="image">
                    <Upload.Dragger
                        name="files"
                        action="/api/upload"
                        listType="picture"
                        maxCount={1}
                    >
                        <p className="ant-upload-text">Drag & drop a file in this area</p>
                    </Upload.Dragger>
                </Form.Item>
            </Form>
        </Edit>
    );
};

import { Edit, useForm } from "@pankod/refine";
import { Upload, Form, Input } from "antd";

export const PostEdit: React.FC = () => {
    const { formProps, saveButtonProps } = useForm();

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item label="Title" name="title">
                    <Input />
                </Form.Item>
                <Form.Item label="Image" name="image">
                    <Upload.Dragger
                        name="files"
                        action="/api/upload"
                        listType="picture"
                        maxCount={1}
                    >
                        <p className="ant-upload-text">Drag & drop a file in this area</p>
                    </Upload.Dragger>
                </Form.Item>
            </Form>
        </Edit>
    );
};

import { Edit, useForm } from "@pankod/refine";
import { Upload, Form, Input, Button } from "antd";

export const PostEdit: React.FC = () => {
    const { formProps, saveButtonProps } = useForm();

    const handleUpload = async (values) => {
        // Step 1: Upload the file
        const formData = new FormData();
        formData.append('files', values.image.file.originFileObj);

        const uploadResponse = await fetch('<http://192.168.0.35:1340/api/upload',> {
            method: 'POST',
            body: formData,
        });

        const uploadData = await uploadResponse.json();
        const fileId = uploadData[0].id; // Get the ID of the uploaded file

        // Step 2: Create a new article with the uploaded file
        const articleResponse = await fetch('<http://192.168.0.35:1340/api/articles',> {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: values.title,
                content: values.content,
                image: fileId, // Relate the uploaded file to the article
            }),
        });

        const articleData = await articleResponse.json();
        console.log(articleData);
    };
return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical" onFinish={handleUpload}>
                <Form.Item label="Title" name="title">
                    <Input />
                </Form.Item>
                <Form.Item label="Content" name="content">
                    <Input.TextArea />
                </Form.Item>
                <Form.Item label="Image" name="image">
                    <Upload.Dragger
                        name="file"
                        listType="picture"
                        maxCount={1}
                    >
                        <p className="ant-upload-text">Drag & drop a file in this area</p>
                    </Upload.Dragger>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </Edit>
    );
};

import { Edit, useForm } from "@pankod/refine";
import { Upload, Form, Input, Button } from "antd";

export const PostEdit: React.FC = () => {
    const { formProps, saveButtonProps } = useForm();

    const handleUpload = async (values) => {
        // Step 1: Upload the file
        const formData = new FormData();
        formData.append('files', values.image.file.originFileObj);

        const uploadResponse = await fetch('<http://192.168.0.35:1340/api/upload',> {
            method: 'POST',
            body: formData,
        });

        const uploadData = await uploadResponse.json();
        const fileId = uploadData[0].id; // Get the ID of the uploaded file

        // Step 2: Create a new article with the uploaded file
        const articleResponse = await fetch('<http://192.168.0.35:1340/api/articles',> {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: values.title,
                content: values.content,
                image: fileId, // Relate the uploaded file to the article
            }),
        });

        const articleData = await articleResponse.json();
        console.log(articleData);
    };
return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical" onFinish={handleUpload}>
                <Form.Item label="Title" name="title">
                    <Input />
                </Form.Item>
                <Form.Item label="Content" name="content">
                    <Input.TextArea />
                </Form.Item>
                <Form.Item label="Image" name="image">
                    <Upload.Dragger
                        name="file"
                        listType="picture"
                        maxCount={1}
                    >
                        <p className="ant-upload-text">Drag & drop a file in this area</p>
                    </Upload.Dragger>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </Edit>
    );
};

<Form.Item label="Cover">
  <Form.Item
    name="image"
    valuePropName="fileList"
    getValueProps={(data) => getValueProps(data, API_URL)}
    noStyle
  >
    <Upload.Dragger
      name="files"
      action={`${API_URL}/api/upload`}
      headers={{
        Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
      }}
      listType="picture-circle"
      accept=".jpg,.png"
      onChange={(info) => {
        if (info.file.status === 'done') {
          // The response from the server is in info.file.response
          const fileId = info.file.response[0].id;
          console.log('File ID:', fileId);
        }
      }}
    >
      <p className="ant-upload-text">Drag & drop a file in this area</p>
    </Upload.Dragger>
  </Form.Item>
</Form.Item>

<Form.Item label="Cover">
  <Form.Item
    name="image"
    valuePropName="fileList"
    getValueProps={(data) => getValueProps(data, API_URL)}
    noStyle
  >
    <Upload.Dragger
      name="files"
      action={`${API_URL}/api/upload`}
      headers={{
        Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
      }}
      listType="picture-circle"
      accept=".jpg,.png"
      onChange={(info) => {
        if (info.file.status === 'done') {
          // The response from the server is in info.file.response
          const fileId = info.file.response[0].id;
          console.log('File ID:', fileId);
        }
      }}
    >
      <p className="ant-upload-text">Drag & drop a file in this area</p>
    </Upload.Dragger>
  </Form.Item>
</Form.Item>

import { useStepsForm } from "@pankod/refine";

export const MyForm: React.FC = () => {
  const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
    submit: async (values) => {
      console.log("Custom submit function");
      console.log(values);
      // Your custom logic here
      return Promise.resolve({});
    },
  });

  // Your form fields here
};

import { useStepsForm } from "@pankod/refine";

export const MyForm: React.FC = () => {
  const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
    submit: async (values) => {
      console.log("Custom submit function");
      console.log(values);
      // Your custom logic here
      return Promise.resolve({});
    },
  });

  // Your form fields here
};

import { useForm } from "@pankod/refine";

export const MyForm: React.FC = () => {
  const { formProps, saveButtonProps } = useForm();

  const handleOnFinish = (values: any) => {
    formProps.onFinish?.({
      nome: values.nome,
      bi: values.bi,
      nuit: values.nuit,
      dataNasc: values.dataNasc,
      localNascimento: values.bi,
      morada: values.morada,
      contacto: values.contacto,
      email: values.email,
      foto: 555,
      fotoUrl: "25",
    });
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Your form fields here */}
    </Form>
  );
};

import { useForm } from "@pankod/refine";

export const MyForm: React.FC = () => {
  const { formProps, saveButtonProps } = useForm();

  const handleOnFinish = (values: any) => {
    formProps.onFinish?.({
      nome: values.nome,
      bi: values.bi,
      nuit: values.nuit,
      dataNasc: values.dataNasc,
      localNascimento: values.bi,
      morada: values.morada,
      contacto: values.contacto,
      email: values.email,
      foto: 555,
      fotoUrl: "25",
    });
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Your form fields here */}
    </Form>
  );
};

import { useStepsForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm: React.FC = () => {
    const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
        totalSteps: 2,
    });

    return (
        <Form {...formProps}>
            {current === 0 && (
                <Form.Item label="Step 1" name="step1">
                    <Input />
                </Form.Item>
            )}
            {current === 1 && (
                <Form.Item label="Step 2" name="step2">
                    <Input />
                </Form.Item>
            )}
            <Button {...saveButtonProps} onClick={() => gotoStep(current + 1)}>
                Next
            </Button>
        </Form>
    );
};

import { useStepsForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm: React.FC = () => {
    const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
        totalSteps: 2,
    });

    return (
        <Form {...formProps}>
            {current === 0 && (
                <Form.Item label="Step 1" name="step1">
                    <Input />
                </Form.Item>
            )}
            {current === 1 && (
                <Form.Item label="Step 2" name="step2">
                    <Input />
                </Form.Item>
            )}
            <Button {...saveButtonProps} onClick={() => gotoStep(current + 1)}>
                Next
            </Button>
        </Form>
    );
};

import { useStepsForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm: React.FC = () => {
    const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
        totalSteps: 2,
        submit: async (values) => {
            handleOnFinish(values);
            return Promise.resolve({});
        },
    });

    const handleOnFinish = (values: any) => {
        console.log({
            nome: values.nome,
            bi: values.bi,
            nuit: values.nuit,
            dataNasc: values.dataNasc,
            localNascimento: values.bi,
            morada: values.morada,
            contacto: values.contacto,
            email: values.email,
            foto: 555,
            fotoUrl: "25",
        });
    };

    return (
        <Form {...formProps}>
            {current === 0 && (
                /* Your form fields for step 1 here */
            )}
            {current === 1 && (
                /* Your form fields for step 2 here */
            )}
            <Button {...saveButtonProps} onClick={() => gotoStep(current + 1)}>
                Next
            </Button>
        </Form>
    );
};

import { useStepsForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm: React.FC = () => {
    const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
        totalSteps: 2,
        submit: async (values) => {
            handleOnFinish(values);
            return Promise.resolve({});
        },
    });

    const handleOnFinish = (values: any) => {
        console.log({
            nome: values.nome,
            bi: values.bi,
            nuit: values.nuit,
            dataNasc: values.dataNasc,
            localNascimento: values.bi,
            morada: values.morada,
            contacto: values.contacto,
            email: values.email,
            foto: 555,
            fotoUrl: "25",
        });
    };

    return (
        <Form {...formProps}>
            {current === 0 && (
                /* Your form fields for step 1 here */
            )}
            {current === 1 && (
                /* Your form fields for step 2 here */
            )}
            <Button {...saveButtonProps} onClick={() => gotoStep(current + 1)}>
                Next
            </Button>
        </Form>
    );
};

<Form.Item label="Cover">
  <Form.Item
    name="image"
    valuePropName="fileList"
    getValueProps={{(data) => getValueProps(data, API_URL)}}
    noStyle
  >
    <Upload.Dragger
      name="files"
      action={{`${{API_URL}}/api/upload`}}
      headers={{
        Authorization: `Bearer ${{localStorage.getItem(TOKEN_KEY)}}`,
      }}
      listType="picture-circle"
      accept=".jpg,.png"
      onChange={{(info) => {{
        if (info.file.status === 'done') {{
          // The response from the server is in info.file.response
          const fileId = info.file.response[0].id;
          console.log('File ID:', fileId);
          // You can set the fileId to a form field like this:
          form.setFieldsValue({{ fileId: fileId }});
        }}
      }}
    >
      <p className="ant-upload-text">Drag & drop a file in this area</p>
    </Upload.Dragger>
  </Form.Item>
</Form.Item>

<Form.Item label="Cover">
  <Form.Item
    name="image"
    valuePropName="fileList"
    getValueProps={{(data) => getValueProps(data, API_URL)}}
    noStyle
  >
    <Upload.Dragger
      name="files"
      action={{`${{API_URL}}/api/upload`}}
      headers={{
        Authorization: `Bearer ${{localStorage.getItem(TOKEN_KEY)}}`,
      }}
      listType="picture-circle"
      accept=".jpg,.png"
      onChange={{(info) => {{
        if (info.file.status === 'done') {{
          // The response from the server is in info.file.response
          const fileId = info.file.response[0].id;
          console.log('File ID:', fileId);
          // You can set the fileId to a form field like this:
          form.setFieldsValue({{ fileId: fileId }});
        }}
      }}
    >
      <p className="ant-upload-text">Drag & drop a file in this area</p>
    </Upload.Dragger>
  </Form.Item>
</Form.Item>

import { Form, Upload } from "antd";

const MyForm: React.FC = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item label="Cover">
        <Form.Item
          name="image"
          valuePropName="fileList"
          noStyle
        >
          <Upload.Dragger
            name="files"
            action={`${API_URL}/api/upload`}
            headers={{
              Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
            }}
            listType="picture-circle"
            accept=".jpg,.png"
            onChange={(info) => {
              if (info.file.status === 'done') {
                const fileId = info.file.response[0].id;
                console.log('File ID:', fileId);
                form.setFieldsValue({ fileId: fileId });
                console.log('Form Values:', form.getFieldsValue());
              }
            }}
          >
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>
    </Form>
  );
};

import { Form, Upload } from "antd";

const MyForm: React.FC = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item label="Cover">
        <Form.Item
          name="image"
          valuePropName="fileList"
          noStyle
        >
          <Upload.Dragger
            name="files"
            action={`${API_URL}/api/upload`}
            headers={{
              Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
            }}
            listType="picture-circle"
            accept=".jpg,.png"
            onChange={(info) => {
              if (info.file.status === 'done') {
                const fileId = info.file.response[0].id;
                console.log('File ID:', fileId);
                form.setFieldsValue({ fileId: fileId });
                console.log('Form Values:', form.getFieldsValue());
              }
            }}
          >
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>
    </Form>
  );
};

import {{ Form, Upload }} from "antd";

const MyForm: React.FC = () => {{
  const [form] = Form.useForm();

  return (
    <Form form={{form}}>
      <Form.Item label="Cover">
        <Form.Item
          name="image"
          valuePropName="fileList"
          noStyle
        >
          <Upload.Dragger
            name="files"
            action={{`${{API_URL}}/api/upload`}}
            headers={{
              Authorization: `Bearer ${{localStorage.getItem(TOKEN_KEY)}}`,
            }}
            listType="picture-circle"
            accept=".jpg,.png"
            onChange={{(info) => {{
              if (info.file.status === 'done') {{
                const fileId = info.file.response[0].id;
                console.log('File ID:', fileId);
                form.setFieldsValue({{ image: fileId }});
                console.log('Form Values:', form.getFieldsValue());
              }}
            }}
          >
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>
    </Form>
  );
}};

import {{ Form, Upload }} from "antd";

const MyForm: React.FC = () => {{
  const [form] = Form.useForm();

  return (
    <Form form={{form}}>
      <Form.Item label="Cover">
        <Form.Item
          name="image"
          valuePropName="fileList"
          noStyle
        >
          <Upload.Dragger
            name="files"
            action={{`${{API_URL}}/api/upload`}}
            headers={{
              Authorization: `Bearer ${{localStorage.getItem(TOKEN_KEY)}}`,
            }}
            listType="picture-circle"
            accept=".jpg,.png"
            onChange={{(info) => {{
              if (info.file.status === 'done') {{
                const fileId = info.file.response[0].id;
                console.log('File ID:', fileId);
                form.setFieldsValue({{ image: fileId }});
                console.log('Form Values:', form.getFieldsValue());
              }}
            }}
          >
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>
    </Form>
  );
}};

import { Form, Upload } from "antd";
import { useState } from "react";

const MyForm: React.FC = () => {
  const [form] = Form.useForm();
  const [fileId, setFileId] = useState(null);

  return (
    <Form form={form}>
      <Form.Item label="Cover">
        <Form.Item
          name="image"
          valuePropName="fileList"
          noStyle
        >
          <Upload.Dragger
            name="files"
            action={`${API_URL}/api/upload`}
            headers={{
              Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
            }}
            listType="picture-circle"
            accept=".jpg,.png"
            onChange={(info) => {
              if (info.file.status === 'done') {
                const fileId = info.file.response[0].id;
                console.log('File ID:', fileId);
                form.setFieldsValue({ image: fileId });
                setFileId(fileId); // Store the fileId in state
                console.log('Form Values:', form.getFieldsValue());
              }
            }}
          >
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>
      {/* You can now use the fileId outside of the Upload.Dragger component */}
      <p>File ID: {fileId}</p>
    </Form>
  );
};

import { Form, Upload } from "antd";
import { useState } from "react";

const MyForm: React.FC = () => {
  const [form] = Form.useForm();
  const [fileId, setFileId] = useState(null);

  return (
    <Form form={form}>
      <Form.Item label="Cover">
        <Form.Item
          name="image"
          valuePropName="fileList"
          noStyle
        >
          <Upload.Dragger
            name="files"
            action={`${API_URL}/api/upload`}
            headers={{
              Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
            }}
            listType="picture-circle"
            accept=".jpg,.png"
            onChange={(info) => {
              if (info.file.status === 'done') {
                const fileId = info.file.response[0].id;
                console.log('File ID:', fileId);
                form.setFieldsValue({ image: fileId });
                setFileId(fileId); // Store the fileId in state
                console.log('Form Values:', form.getFieldsValue());
              }
            }}
          >
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>
      {/* You can now use the fileId outside of the Upload.Dragger component */}
      <p>File ID: {fileId}</p>
    </Form>
  );
};