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

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

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

genetic-orangeOP•2y ago

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

kapa.ai•2y ago

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

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

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

genetic-orangeOP•2y ago

@kapa.ai I am using refine with ant design

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

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

ratty-blush•2y ago

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

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

Did you find this page helpful?