eager-peach•2y 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)

3 Replies

kapa.ai•2y 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•2y 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

eager-peachOP•2y ago

you have to have an image already uploaded to the field via the strapi media plugin