deep-jade
deep-jade14mo ago

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
kapa.ai14mo 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
kapa.ai14mo 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
kapa.ai14mo ago
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade
deep-jade14mo ago
@kapa.ai how do i pull existing files into the fileList when the edit page is loaded
kapa.ai
kapa.ai14mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai14mo 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
kapa.ai14mo ago
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade
deep-jade14mo ago
@kapa.ai I am using refine with ant design
kapa.ai
kapa.ai14mo 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>
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:
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
kapa.ai14mo ago
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire14mo ago
Hey @erekyu, With this changes, the error will gone 🚀 https://github.com/refinedev/refine/pull/4196