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

genuine-moccasin · 2023-04-18T11:37:49.479Z

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

K

kapa.ai•4/18/23, 11:37 AM

Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•4/18/23, 11:38 AM

----------------------
To list media in the interface when using Strapi with Refine, you can follow these steps:

Create an interface for the data from your Strapi API, including the media field. For example, if you have a
```
Product
```
```
Product
```
collection with an
```
Image
```
Image
```
Image
```
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;
  };
}

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

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

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

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

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

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

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

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

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

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

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

Define the columns for your table, including a column for the media field. To display the image, you can use the
```
renderCell
```
renderCell
```
renderCell
```
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...
  ],
  []
);

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...
  ],
  []
);

Finally, use the
```
DataGrid
```
```
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} />;

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:

K

kapa.ai•4/18/23, 11:39 AM

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
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

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?

K

kapa.ai•4/18/23, 11:39 AM

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

G

genuine-moccasinOP•4/18/23, 12:32 PM

@kapa.ai what would the edit page look like

K

kapa.ai•4/18/23, 12:32 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/18/23, 12:33 PM

----------------------
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

Post

resource:

Create a
```
PostEdit
```
```
PostEdit
```
component in your
```
pages/posts
```
pages/posts
```
pages/posts
```
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>
  );
};

// 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>
  );
};

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

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

Add the

PostEdit

PostEdit

component to the

resources

resources

prop of the

Refine

Refine

component in your

App.tsx

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,
        },
      ]}
    />
    // ...
  );
};

// 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:

K

kapa.ai•4/18/23, 12:33 PM

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
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

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?

K

kapa.ai•4/18/23, 12:33 PM

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

G

genuine-moccasinOP•4/18/23, 12:37 PM

@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

K

kapa.ai•4/18/23, 12:37 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/18/23, 12:39 PM

----------------------
To create an edit page with a Strapi media uploader, you can use the

Upload.Dragger

Upload.Dragger

Upload.Dragger

Upload.Dragger component from Ant Design. Here's an example of an edit page for a

Post

Post

resource with an image field:

Create an interface for the
```
Post
```
```
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;
  };
}

// 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;
  };
}

Create a
```
PostEdit
```
```
PostEdit
```
component in your
```
pages/posts
```
pages/posts
```
pages/posts
```
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>
  );
};

// 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>
  );
};

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

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

// src/pages/posts/index.tsx

export * from "./edit";

K

kapa.ai•4/18/23, 12:39 PM

Add the

PostEdit

PostEdit

component to the

resources

resources

prop of the

Refine

Refine

component in your

App.tsx

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,
        },
      ]}
    />
    // ...
  );
};

// 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

Post

resource with an image field. The

Upload.Dragger

Upload.Dragger

Upload.Dragger

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
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

Multipart Upload | refine

We will show you how to multipart upload with refine.

K

kapa.ai•4/18/23, 12:39 PM

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

G

genuine-moccasinOP•4/18/23, 12:45 PM

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

K

kapa.ai•4/18/23, 12:45 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/18/23, 12:46 PM

----------------------
It seems like you're encountering an issue with the

getValueFromEvent

getValueFromEvent

getValueFromEvent

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

getValueFromEvent

getValueFromEvent

getValueFromEvent function provided by Refine. Update your

PostEdit

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>
  );
}};

// 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

getValueFromEvent

getValueFromEvent

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

K

kapa.ai•4/18/23, 12:46 PM

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
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

Multipart Upload | refine

We will show you how to multipart upload with refine.

K

kapa.ai•4/18/23, 12:46 PM

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

G

genuine-moccasinOP•4/18/23, 12:50 PM

@kapa.ai my new error for getValueFromEvent is "(fileList []).forEach is not a function"

K

kapa.ai•4/18/23, 12:50 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/18/23, 12:52 PM

----------------------
It seems like the

getValueFromEvent

getValueFromEvent

getValueFromEvent

getValueFromEvent function is expecting an array, but it's receiving a non-array value. To fix this issue, you can create a custom

getValueFromEvent

getValueFromEvent

getValueFromEvent

getValueFromEvent function that handles the file upload event and ensures that the returned value is an array.

Update your

PostEdit

PostEdit

component with a custom

getValueFromEvent

getValueFromEvent

getValueFromEvent

getValueFromEvent function as follows:

// src/pages/posts/edit.tsx

import {{
  Edit,
  useForm,
}} 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();

  // Custom getValueFromEvent function
  const customGetValueFromEvent = (e: any) => {{
    if (Array.isArray(e)) {{
      return e;
    }}
    return e && e.fileList ? e.fileList : [];
  }};

  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={{customGetValueFromEvent}} // Use the custom 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,
}} 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();

  // Custom getValueFromEvent function
  const customGetValueFromEvent = (e: any) => {{
    if (Array.isArray(e)) {{
      return e;
    }}
    return e && e.fileList ? e.fileList : [];
  }};

  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={{customGetValueFromEvent}} // Use the custom 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,
}} 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();

  // Custom getValueFromEvent function
  const customGetValueFromEvent = (e: any) => {{
    if (Array.isArray(e)) {{
      return e;
    }}
    return e && e.fileList ? e.fileList : [];
  }};

  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={{customGetValueFromEvent}} // Use the custom 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,
}} 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();

  // Custom getValueFromEvent function
  const customGetValueFromEvent = (e: any) => {{
    if (Array.isArray(e)) {{
      return e;
    }}
    return e && e.fileList ? e.fileList : [];
  }};

  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={{customGetValueFromEvent}} // Use the custom 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>
  );
}};

K

kapa.ai•4/18/23, 12:52 PM

By using the custom

getValueFromEvent

getValueFromEvent

getValueFromEvent

getValueFromEvent function, you should be able to resolve the "(fileList || []).forEach is not a function" error.

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
```
```
Note: you can ask me a follow up question by @ mentioning me again
```
----------------------

Multipart Upload | refine

We will show you how to multipart upload with refine.

K

kapa.ai•4/18/23, 12:52 PM

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

G

genuine-moccasinOP•4/18/23, 1:25 PM

@kapa.ai still getting the same error

K

kapa.ai•4/18/23, 1:25 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/18/23, 1:25 PM

@erekyu That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

C

colossal-harlequin•4/18/23, 6:25 PM

Hey @erekyu,

https://github.com/refinedev/refine/pull/4196

I've created a PR to resolve file upload issues with refine. Now, It's on the review process. But, you can see the changes on PR like documentation, fixed examples and others.

I hope it helps you

Ccolossal-harlequin Hey @erekyu, https://github.com/refinedev/refine/pull/4196 I've created a PR t...

G

genuine-moccasinOP•4/18/23, 6:26 PM

do you think that is also the reason its not listing files that already exist on the edit page?

C

colossal-harlequin•4/18/23, 6:29 PM

Yes, I do. As far as I understand, the strapi API has changed and our

getValueProps

getValueProps

getValueProps

getValueProps method is outdated. I updated it and problem solved on the example.

Ccolossal-harlequin Yes, I do. As far as I understand, the strapi API has changed and our `getValueP...

G

genuine-moccasinOP•4/18/23, 6:40 PM

You are a rock star, I thought I was doing something wrong this hole time! I went over every example deleted and reinstalled and reset up strapi and refine multiple times I thought I was going crazy

Ggenuine-moccasin You are a rock star, I thought I was doing something wrong this hole time! I wen...

C

colossal-harlequin•4/18/23, 7:16 PM

Frankly, I went through similar processes while I was doing it

Ccolossal-harlequin Frankly, I went through similar processes while I was doing it 🤣

G

genuine-moccasinOP•4/18/23, 8:13 PM

did you ever run into

e is not iterable
TypeError: e is not iterable

e is not iterable
TypeError: e is not iterable

e is not iterable
TypeError: e is not iterable

e is not iterable
TypeError: e is not iterable

G

genuine-moccasinOP•4/18/23, 8:21 PM

because I made all the changes and the files upload, and attach perfectly but when i go back into the edit i get

e is not iterable
TypeError: e is not iterable
    at G (http://localhost:3000/static/js/bundle.js:36243:76)
    at getValueProps (http://localhost:3000/static/js/bundle.js:1867:105)
    at Field._this.getControlled (http://localhost:3000/static/js/bundle.js:208373:208)
    at Field._this.getOnlyChild (http://localhost:3000/static/js/bundle.js:208328:224)
    at Field.render (http://localhost:3000/static/js/bundle.js:208470:37)
    at finishClassComponent (http://localhost:3000/static/js/bundle.js:266235:35)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:266192:28)
    at beginWork (http://localhost:3000/static/js/bundle.js:267818:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:252809:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:252853:20)

e is not iterable
TypeError: e is not iterable
    at G (http://localhost:3000/static/js/bundle.js:36243:76)
    at getValueProps (http://localhost:3000/static/js/bundle.js:1867:105)
    at Field._this.getControlled (http://localhost:3000/static/js/bundle.js:208373:208)
    at Field._this.getOnlyChild (http://localhost:3000/static/js/bundle.js:208328:224)
    at Field.render (http://localhost:3000/static/js/bundle.js:208470:37)
    at finishClassComponent (http://localhost:3000/static/js/bundle.js:266235:35)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:266192:28)
    at beginWork (http://localhost:3000/static/js/bundle.js:267818:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:252809:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:252853:20)

e is not iterable
TypeError: e is not iterable
    at G (http://localhost:3000/static/js/bundle.js:36243:76)
    at getValueProps (http://localhost:3000/static/js/bundle.js:1867:105)
    at Field._this.getControlled (http://localhost:3000/static/js/bundle.js:208373:208)
    at Field._this.getOnlyChild (http://localhost:3000/static/js/bundle.js:208328:224)
    at Field.render (http://localhost:3000/static/js/bundle.js:208470:37)
    at finishClassComponent (http://localhost:3000/static/js/bundle.js:266235:35)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:266192:28)
    at beginWork (http://localhost:3000/static/js/bundle.js:267818:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:252809:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:252853:20)

e is not iterable
TypeError: e is not iterable
    at G (http://localhost:3000/static/js/bundle.js:36243:76)
    at getValueProps (http://localhost:3000/static/js/bundle.js:1867:105)
    at Field._this.getControlled (http://localhost:3000/static/js/bundle.js:208373:208)
    at Field._this.getOnlyChild (http://localhost:3000/static/js/bundle.js:208328:224)
    at Field.render (http://localhost:3000/static/js/bundle.js:208470:37)
    at finishClassComponent (http://localhost:3000/static/js/bundle.js:266235:35)
    at updateClassComponent (http://localhost:3000/static/js/bundle.js:266192:28)
    at beginWork (http://localhost:3000/static/js/bundle.js:267818:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:252809:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:252853:20)

C

colossal-harlequin•4/18/23, 8:23 PM

Can you share your API response on edit page?

G

genuine-moccasinOP•4/18/23, 8:27 PM

if i remove

valuePropName='fileList'
                        getValueProps={(data) => getValueProps(data, API_URL)}

valuePropName='fileList'
                        getValueProps={(data) => getValueProps(data, API_URL)}

valuePropName='fileList'
                        getValueProps={(data) => getValueProps(data, API_URL)}

valuePropName='fileList'
                        getValueProps={(data) => getValueProps(data, API_URL)}

i can get the page to load,

this is the response to my api call for the file i am trying to get:

contract 18 items
id: 17
name: "testFile.pdf"
alternativeText: null
caption: null
width: null
height: null
formats: null
hash: "43e9b4f7340f98200b70b74021342391"
ext: ".pdf"
mime: "application/pdf"
size: 342.36
url: "https://mmgi.nyc3.cdn.digitaloceanspaces.com/tsd/43e9b4f7340f98200b70b74021342391.pdf"
previewUrl: null
provider: "strapi-provider-upload-dos"
provider_metadata: null
createdAt: "2023-04-18T20:19:53.923Z"
updatedAt: "2023-04-18T20:19:53.923Z"
 related 1 item
▶ 0 9 items
id: 1
__type: "api::project.project"
address: "123 test st"
city: "Boynton beach"
zipCode: "33426"
projectType: "Pool Enclosure"
createdAt: "2023-04-07T13:54:55.360Z"
updatedAt: "2023-04-18T20:19:58.417Z"
contractPrice: "30,000.00"

contract 18 items
id: 17
name: "testFile.pdf"
alternativeText: null
caption: null
width: null
height: null
formats: null
hash: "43e9b4f7340f98200b70b74021342391"
ext: ".pdf"
mime: "application/pdf"
size: 342.36
url: "https://mmgi.nyc3.cdn.digitaloceanspaces.com/tsd/43e9b4f7340f98200b70b74021342391.pdf"
previewUrl: null
provider: "strapi-provider-upload-dos"
provider_metadata: null
createdAt: "2023-04-18T20:19:53.923Z"
updatedAt: "2023-04-18T20:19:53.923Z"
 related 1 item
▶ 0 9 items
id: 1
__type: "api::project.project"
address: "123 test st"
city: "Boynton beach"
zipCode: "33426"
projectType: "Pool Enclosure"
createdAt: "2023-04-07T13:54:55.360Z"
updatedAt: "2023-04-18T20:19:58.417Z"
contractPrice: "30,000.00"

contract 18 items
id: 17
name: "testFile.pdf"
alternativeText: null
caption: null
width: null
height: null
formats: null
hash: "43e9b4f7340f98200b70b74021342391"
ext: ".pdf"
mime: "application/pdf"
size: 342.36
url: "https://mmgi.nyc3.cdn.digitaloceanspaces.com/tsd/43e9b4f7340f98200b70b74021342391.pdf"
previewUrl: null
provider: "strapi-provider-upload-dos"
provider_metadata: null
createdAt: "2023-04-18T20:19:53.923Z"
updatedAt: "2023-04-18T20:19:53.923Z"
 related 1 item
▶ 0 9 items
id: 1
__type: "api::project.project"
address: "123 test st"
city: "Boynton beach"
zipCode: "33426"
projectType: "Pool Enclosure"
createdAt: "2023-04-07T13:54:55.360Z"
updatedAt: "2023-04-18T20:19:58.417Z"
contractPrice: "30,000.00"

contract 18 items
id: 17
name: "testFile.pdf"
alternativeText: null
caption: null
width: null
height: null
formats: null
hash: "43e9b4f7340f98200b70b74021342391"
ext: ".pdf"
mime: "application/pdf"
size: 342.36
url: "https://mmgi.nyc3.cdn.digitaloceanspaces.com/tsd/43e9b4f7340f98200b70b74021342391.pdf"
previewUrl: null
provider: "strapi-provider-upload-dos"
provider_metadata: null
createdAt: "2023-04-18T20:19:53.923Z"
updatedAt: "2023-04-18T20:19:53.923Z"
 related 1 item
▶ 0 9 items
id: 1
__type: "api::project.project"
address: "123 test st"
city: "Boynton beach"
zipCode: "33426"
projectType: "Pool Enclosure"
createdAt: "2023-04-07T13:54:55.360Z"
updatedAt: "2023-04-18T20:19:58.417Z"
contractPrice: "30,000.00"

G

genuine-moccasinOP•4/18/23, 8:28 PM

oh i missed part ill edit that

C

colossal-harlequin•4/18/23, 8:30 PM

Did you update this place?

https://github.com/refinedev/refine/pull/4196/files#diff-ce1e73049f76f2056f53e0ba37a10fa912d67335f7da367fa0d30fd96dc44c98R10

G

genuine-moccasinOP•4/18/23, 8:30 PM

yes

Ggenuine-moccasin if i remove ```valuePropName='fileList' getValueProps={(...

C

colossal-harlequin•4/18/23, 8:32 PM

I can't quite understand here, but is your file field an array or an object?

C

colossal-harlequin•4/18/23, 8:34 PM

Are you sure you are using your own getValueProps function? Or are you importing from @refinedev/strapi-v4?

C

colossal-harlequin•4/18/23, 8:35 PM

Because the changes in PR have not yet been released

Ccolossal-harlequin Are you sure you are using your own getValueProps function? Or are you importing...

G

genuine-moccasinOP•4/18/23, 8:37 PM

i copied your changes into my node_modules

G

genuine-moccasinOP•4/18/23, 8:37 PM

(removed the files and updated the array)

C

colossal-harlequin•4/18/23, 8:38 PM

The error is caused by trying to spread an object in an array.

C

colossal-harlequin•4/18/23, 8:40 PM

Can you try creating an own

getValueProps

getValueProps

getValueProps

getValueProps function and use it. In my opinion node_modules changes don't work

G

genuine-moccasinOP•4/18/23, 8:40 PM

sure

G

genuine-moccasinOP•4/18/23, 8:40 PM

i will try that

G

genuine-moccasinOP•4/18/23, 8:40 PM

driving home now will test it later this evening, ty again for your time i apricate it

Ccolossal-harlequin Can you try creating an own `getValueProps` function and use it. In my opinion n...

G

genuine-moccasinOP•4/19/23, 3:14 AM

that did it ty sooo much!