exotic-emerald
exotic-emerald14mo ago

I have media attached but just getting a list of nothing files

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>
);
};
export interface IDocuments{
id: string;
contract: IContract;
}
export interface IContract{
id: string;
name: string;
url: string;
type: string;
size: number;
percent: number;
}
export interface IDocuments{
id: string;
contract: IContract;
}
export interface IContract{
id: string;
name: string;
url: string;
type: string;
size: number;
percent: number;
}
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)
No description
No description
3 Replies
kapa.ai
kapa.ai14mo ago
Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: Sorry @erekyu, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?
xenial-black
xenial-black14mo ago
i couldn't reproduce the problem in our example. i'm still investigating. if you reproduce the problem on codesandbox or any other platform we will happy to debug
exotic-emerald
exotic-emerald14mo ago
you have to have an image already uploaded to the field via the strapi media plugin