using strapi v4 media uploader trying to get existing files getting a fileList error

when I use strapi media uploader and there is an existing file when I load my edit page I get the following error:

(fileList || []).forEach is not a function
TypeError: (fileList || []).forEach is not a function

(fileList || []).forEach is not a function
TypeError: (fileList || []).forEach is not a function

11 Replies

kapa.ai•16mo 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:

kapa.ai•16mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation (https://refine.dev/docs) for more information and guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•16mo ago

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

compatible-crimson•16mo ago

@kapa.ai how do i pull existing files into the fileList when the edit page is loaded

kapa.ai•16mo ago

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

kapa.ai•16mo ago

---------------------- To pull existing files into the fileList when the edit page is loaded, you can use the normalize prop in the Form.Item component. The normalize prop is used to process the value before it's passed to the form. You can create a function to convert the existing files into the format expected by the fileList. Here's an example from the Supabase Edit page (https://refine.dev/docs/advanced-tutorials/data-provider/supabase) in the refine documentation:

<Form.Item
  name="images"
  valuePropName="fileList"
  normalize={normalizeFile}
  noStyle
>
  <Upload.Dragger
    name="file"
    listType="picture"
    multiple
    // ... other props
  >
    <p className="ant-upload-text">
      Drag & drop a file in this area
    </p>
  </Upload.Dragger>
</Form.Item>

<Form.Item
  name="images"
  valuePropName="fileList"
  normalize={normalizeFile}
  noStyle
>
  <Upload.Dragger
    name="file"
    listType="picture"
    multiple
    // ... other props
  >
    <p className="ant-upload-text">
      Drag & drop a file in this area
    </p>
  </Upload.Dragger>
</Form.Item>

In this example, the normalizeFile function is used to process the existing files. You can create a similar function to handle your specific use case. Here's an example of the normalizeFile function from the Simple Web Application with Refine (https://refine.dev/blog/simple-web-application-with-refine/) blog post:

export const normalizeFile = (event) => {
  const { fileList } = event;

  return fileList.map((item) => {
    const { uid, name, type, size, response, percent, status } = item;

    return {
      uid,
      name,
      url: item.url || response?.url,
      type,
      size,
      percent,
      status,
    };
  });
};

export const normalizeFile = (event) => {
  const { fileList } = event;

  return fileList.map((item) => {
    const { uid, name, type, size, response, percent, status } = item;

    return {
      uid,
      name,
      url: item.url || response?.url,
      type,
      size,
      percent,
      status,
    };
  });
};

You can modify this function to suit your needs and handle the existing files in your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Simple Web Application Example with Refine | refine

Do you want to develop a web application quickly? You are at the right place!

kapa.ai•16mo ago

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

compatible-crimson•16mo ago

@kapa.ai I am using refine with ant design

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To pull existing files into the fileList when the edit page is loaded using refine with Ant Design, you can use the normalize prop in the Form.Item component. The normalize prop is used to process the value before it's passed to the form. You can create a function to convert the existing files into the format expected by the fileList. Here's an example:

import { Form, Upload } from "antd";

<Form.Item
  name="images"
  valuePropName="fileList"
  normalize={normalizeFile}
  noStyle
>
  <Upload.Dragger
    name="file"
    listType="picture"
    multiple
    // ... other props
  >
    <p className="ant-upload-text">
      Drag & drop a file in this area
    </p>
  </Upload.Dragger>
</Form.Item>

import { Form, Upload } from "antd";

<Form.Item
  name="images"
  valuePropName="fileList"
  normalize={normalizeFile}
  noStyle
>
  <Upload.Dragger
    name="file"
    listType="picture"
    multiple
    // ... other props
  >
    <p className="ant-upload-text">
      Drag & drop a file in this area
    </p>
  </Upload.Dragger>
</Form.Item>

const normalizeFile = (fileList) => {
  return fileList.map((item) => {
    const { uid, name, type, size, response, percent, status } = item;

    return {
      uid,
      name,
      url: item.url || response?.url,
      type,
      size,
      percent,
      status,
    };
  });
};

const normalizeFile = (fileList) => {
  return fileList.map((item) => {
    const { uid, name, type, size, response, percent, status } = item;

    return {
      uid,
      name,
      url: item.url || response?.url,
      type,
      size,
      percent,
      status,
    };
  });
};

You can modify this function to suit your needs and handle the existing files in your application. For more information on custom inputs with Ant Design in refine, refer to the documentation (https://refine.dev/docs/api-reference/antd/components/inputs/custom-inputs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

passive-yellow•16mo ago

Hey @erekyu, With this changes, the error will gone 🚀 https://github.com/refinedev/refine/pull/4196