I can not figure out what I am doing wrong and I am sure its something simple. I want to list the files that are already attached to the field. I believe I am calling the field correctly as the query explorer shows the data (see attached picture).
I have also attached a picture of what i get on the page. if i click delete on any of them except the last one they all disappear but if I click delete on the last one my actual image deletes.
Here is my code:
edit page:
import React from "react";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm, useSelect, getValueFromEvent } from "@refinedev/antd";
import { Button, Space, Form, Input, Select, Upload, Radio, SelectProps, DatePickerProps, DatePicker, Col, Row, Divider, Modal } from "antd";
import {
useStrapiUpload,
getValueProps,
mediaUploadMapper,
} from "@refinedev/strapi-v4";
import { TOKEN_KEY, API_URL } from "../../constants";
import { IPaymentStructure, IProject } from "interfaces";
import { AntdCreateInferencer } from "@refinedev/inferencer/antd";
export const ProjectEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm<IProject>({
action: "edit",
metaData: {
populate: {
paymentStructure: {
populate: "*",
},
customerProfile: {
populate: "*",
},
mailingAddress: {
populate: "*",
},
email: {
populate: "*",
},
phoneNumbers: {
populate: "*",
},
documents: {
populate: "*",
},
contract: {
populate: "*",
}
},
},
});
const projectData = queryResult?.data?.data;
const { ...uploadProps } = useStrapiUpload({
maxCount: 1,
});
return (
<Edit saveButtonProps={saveButtonProps}>
<Form
{...formProps}
layout="vertical"
// eslint-disable-next-line
onFinish={(values: any) => {
return formProps.onFinish?.(mediaUploadMapper(values));
}}
>
<Form.Item label="Contracts">
<Form.Item
name={['documents', 'contract', 'name']}
valuePropName="fileList"
getValueProps={(data) => getValueProps(data, API_URL)}
noStyle
>
<Upload
name="files"
action={`${API_URL}api/upload`}
headers={{
Authorization: `Bearer ${localStorage.getItem(
TOKEN_KEY,
)}`,
}}
listType="text"
{...uploadProps}
>
<Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
</Form.Item>
</Form.Item>
</Row>
</Form>
</Edit>
);
};
import React from "react";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm, useSelect, getValueFromEvent } from "@refinedev/antd";
import { Button, Space, Form, Input, Select, Upload, Radio, SelectProps, DatePickerProps, DatePicker, Col, Row, Divider, Modal } from "antd";
import {
useStrapiUpload,
getValueProps,
mediaUploadMapper,
} from "@refinedev/strapi-v4";
import { TOKEN_KEY, API_URL } from "../../constants";
import { IPaymentStructure, IProject } from "interfaces";
import { AntdCreateInferencer } from "@refinedev/inferencer/antd";
export const ProjectEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm<IProject>({
action: "edit",
metaData: {
populate: {
paymentStructure: {
populate: "*",
},
customerProfile: {
populate: "*",
},
mailingAddress: {
populate: "*",
},
email: {
populate: "*",
},
phoneNumbers: {
populate: "*",
},
documents: {
populate: "*",
},
contract: {
populate: "*",
}
},
},
});
const projectData = queryResult?.data?.data;
const { ...uploadProps } = useStrapiUpload({
maxCount: 1,
});
return (
<Edit saveButtonProps={saveButtonProps}>
<Form
{...formProps}
layout="vertical"
// eslint-disable-next-line
onFinish={(values: any) => {
return formProps.onFinish?.(mediaUploadMapper(values));
}}
>
<Form.Item label="Contracts">
<Form.Item
name={['documents', 'contract', 'name']}
valuePropName="fileList"
getValueProps={(data) => getValueProps(data, API_URL)}
noStyle
>
<Upload
name="files"
action={`${API_URL}api/upload`}
headers={{
Authorization: `Bearer ${localStorage.getItem(
TOKEN_KEY,
)}`,
}}
listType="text"
{...uploadProps}
>
<Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
</Form.Item>
</Form.Item>
</Row>
</Form>
</Edit>
);
};
I can't figure out what I am doing wrong. (I know upload doesn't work with the useStrapiUpload currently and that it is being looked at)