what is the correct way to list media in the interface export when using strapi v4 media uploader?

if I am using strapi with the media uploader, what would the correct way to list that media in the interface export?

35 Replies

Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To list media in the interface when using Strapi with Refine, you can follow these steps: 1. Create an interface for the data from your Strapi API, including the media field. For example, if you have a Product collection with an Image field, your interface might look like this:

export interface IProduct {
  id: number;
  title: string;
  description: string;
  image: {
    url: string;
  };
}

export interface IProduct {
  id: number;
  title: string;
  description: string;
  image: {
    url: string;
  };
}

2. In your list component, use the useDataGrid hook to fetch the data and display it in a table. For example, in a ProductList component:

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

const { dataGridProps } = useDataGrid<IProduct>();

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

const { dataGridProps } = useDataGrid<IProduct>();

3. Define the columns for your table, including a column for the media field. To display the image, you can use the renderCell function:

import { GridColumns } from "@mui/x-data-grid";

const columns = React.useMemo<GridColumns<IProduct>>(
  () => [
    // Other columns...
    {
      field: "image",
      headerName: "Image",
      minWidth: 150,
      renderCell: function render({ row }) {
        return <img src={row.image?.url} alt={row.title} width="100" />;
      },
    },
    // Other columns...
  ],
  []
);

import { GridColumns } from "@mui/x-data-grid";

const columns = React.useMemo<GridColumns<IProduct>>(
  () => [
    // Other columns...
    {
      field: "image",
      headerName: "Image",
      minWidth: 150,
      renderCell: function render({ row }) {
        return <img src={row.image?.url} alt={row.title} width="100" />;
      },
    },
    // Other columns...
  ],
  []
);

4. Finally, use the DataGrid component to display the table with the fetched data and defined columns:

import { DataGrid } from "@mui/x-data-grid";

<DataGrid {...dataGridProps} columns={columns} />;

import { DataGrid } from "@mui/x-data-grid";

<DataGrid {...dataGridProps} columns={columns} />;

This will display the media (e.g., images) in the interface when listing the records. For more information on listing records with Refine and Strapi, you can refer to the following sources:

kapa.ai•2y ago

- How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/) - Building a CRUD app with Material UI and Strapi in React (https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

How to Build a React Admin Panel with Mantine and Strapi | refine

We'll be building a simple React Admin Panel with refine and Mantine using Strapi as a backend service.

Building a CRUD app with Material UI and Strapi in React | refine

How to build CRUD admin panel with Material UI?

kapa.ai•2y ago

<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below

equal-aqua•2y ago

@kapa.ai what would the edit page look like

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The edit page for a record in a Refine application would typically include a form with input fields for each property of the record. Here's an example of what an edit page might look like for a Post resource: 1. Create a PostEdit component in your pages/posts directory:

// src/pages/posts/edit.tsx

import { Edit, IResourceComponentsProps, Input, useForm } from "@pankod/refine";

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

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Input name="title" label="Title" {...formProps} />
      <Input name="content" label="Content" {...formProps} />
      {/* Add other input fields as needed */}
    </Edit>
  );
};

// src/pages/posts/edit.tsx

import { Edit, IResourceComponentsProps, Input, useForm } from "@pankod/refine";

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

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Input name="title" label="Title" {...formProps} />
      <Input name="content" label="Content" {...formProps} />
      {/* Add other input fields as needed */}
    </Edit>
  );
};

2. Import the PostEdit component in your pages/posts/index.tsx file:

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

3. Add the PostEdit component to the resources prop of the Refine component in your App.tsx file:

// src/App.tsx

import {
  PostList,
  PostCreate,
  PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
  return (
    // ...
    <Refine
      // ...
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
        },
      ]}
    />
    // ...
  );
};

// src/App.tsx

import {
  PostList,
  PostCreate,
  PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
  return (
    // ...
    <Refine
      // ...
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
        },
      ]}
    />
    // ...
  );
};

After completing these steps, clicking the edit button for a post should redirect you to the edit page, where you can update the record data. For more information on creating an edit page with Refine and Strapi, you can refer to the following sources:

kapa.ai•2y ago

How to Build a React Admin Panel with Mantine and Strapi | refine

We'll be building a simple React Admin Panel with refine and Mantine using Strapi as a backend service.

Building a CRUD app with Material UI and Strapi in React | refine

How to build CRUD admin panel with Material UI?

kapa.ai•2y ago

<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below

equal-aqua•2y ago

@kapa.ai no what I mean is what would the edit page look like when using the strapi media uploader and using export interface to list the media

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To create an edit page with a Strapi media uploader, you can use the Upload.Dragger component from Ant Design. Here's an example of an edit page for a Post resource with an image field: 1. Create an interface for the Post resource, including the image field:

// src/interfaces.ts

export interface IPost {
  id: string;
  title: string;
  image: {
    url: string;
  };
}

// src/interfaces.ts

export interface IPost {
  id: string;
  title: string;
  image: {
    url: string;
  };
}

2. Create a PostEdit component in your pages/posts directory:

// src/pages/posts/edit.tsx

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

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={1}
              multiple={false}
            >
              <p className="ant-upload-text">
                Drag & drop a file in this area
              </p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Edit>
  );
};

// src/pages/posts/edit.tsx

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

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={1}
              multiple={false}
            >
              <p className="ant-upload-text">
                Drag & drop a file in this area
              </p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Edit>
  );
};

3. Import the PostEdit component in your pages/posts/index.tsx file:

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

kapa.ai•2y ago

4. Add the PostEdit component to the resources prop of the Refine component in your App.tsx file:

// src/App.tsx

import {
  PostList,
  PostCreate,
  PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
  return (
    // ...
    <Refine
      // ...
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
        },
      ]}
    />
    // ...
  );
};

// src/App.tsx

import {
  PostList,
  PostCreate,
  PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
  return (
    // ...
    <Refine
      // ...
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
        },
      ]}
    />
    // ...
  );
};

This example demonstrates how to create an edit page with a Strapi media uploader for a Post resource with an image field. The Upload.Dragger component allows you to upload images to Strapi. For more information on creating an edit page with a media uploader, you can refer to the following source: - Multipart Upload - Refine Documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Multipart Upload | refine

We will show you how to multipart upload with refine.

kapa.ai•2y ago

<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below

equal-aqua•2y ago

@kapa.ai when i do that for my edit page I get the following error "e is not iterable TypeError: e is not iterable"

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like you're encountering an issue with the getValueFromEvent function. This function is used to handle the file upload event and extract the necessary information. The error you're encountering might be due to an incorrect implementation of this function. To fix the issue, you can use the getValueFromEvent function provided by Refine. Update your PostEdit component as follows:

// src/pages/posts/edit.tsx

import {{
  Edit,
  useForm,
  getValueFromEvent, // Import this function from Refine
}} from "@pankod/refine";
import {{ Form, Input, Upload }} from "antd";
import {{ useApiUrl }} from "@pankod/refine";
import {{ IPost }} from "interfaces";

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}} // Use the imported function
            noStyle
          >
            <Upload.Dragger
              name="file"
              action={{`${{apiUrl}}/media/upload`}}
              listType="picture"
              maxCount={{1}}
              multiple={{false}}
            >
              <p className="ant-upload-text">
                Drag & drop a file in this area
              </p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Edit>
  );
}};

// src/pages/posts/edit.tsx

import {{
  Edit,
  useForm,
  getValueFromEvent, // Import this function from Refine
}} from "@pankod/refine";
import {{ Form, Input, Upload }} from "antd";
import {{ useApiUrl }} from "@pankod/refine";
import {{ IPost }} from "interfaces";

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}} // Use the imported function
            noStyle
          >
            <Upload.Dragger
              name="file"
              action={{`${{apiUrl}}/media/upload`}}
              listType="picture"
              maxCount={{1}}
              multiple={{false}}
            >
              <p className="ant-upload-text">
                Drag & drop a file in this area
              </p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Edit>
  );
}};

By using the getValueFromEvent function provided by Refine, you should be able to resolve the "e is not iterable" error.

kapa.ai•2y ago

For more information on handling file uploads with Refine, you can refer to the following source: - Multipart Upload - Refine Documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Multipart Upload | refine

We will show you how to multipart upload with refine.

kapa.ai•2y ago

<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below