Display media on upload
I have the below code and I would like to display the refreshed data (including the new upload) when the image is uploaded. Can this be done with a refine.dev hook or should I use a set state?
const {data} = useList<IMedia>({
resource: "media",
});
const url = useApiUrl();
const onUpload = async (options: any) => {
const {onSuccess, onError, file} = options;
const fmData = new FormData();
fmData.append("uploadedFile", file);
try {
const res = await axios.post(
fmData,
{
headers: {"content-type": "multipart/form-data"},
withCredentials: true
}
);
onSuccess("Ok");
} catch (err) {
onError({err});
}
};
return (
<List>
<Space direction="vertical" size={50} style={{width: "100%"}}>
<Upload.Dragger
name="file"
customRequest={onUpload}
listType="picture"
>
</Upload.Dragger>
<Image.PreviewGroup
preview={{
// Displays the image name
countRender: (current) => data?.data[current - 1].id.split("/").at(-1),
}}>
<Flex wrap="wrap" gap="small">
{data?.data.map((media, index) => (
<Image
key={index}
width={300}
height={300}
style={{objectFit: 'cover'}}
src={media.srcUrl}
/>
))}
</Flex>
</Image.PreviewGroup>
</Space>
</List>
);
const {data} = useList<IMedia>({
resource: "media",
});
const url = useApiUrl();
const onUpload = async (options: any) => {
const {onSuccess, onError, file} = options;
const fmData = new FormData();
fmData.append("uploadedFile", file);
try {
const res = await axios.post(
${url}/media/upload,fmData,
{
headers: {"content-type": "multipart/form-data"},
withCredentials: true
}
);
onSuccess("Ok");
} catch (err) {
onError({err});
}
};
return (
<List>
<Space direction="vertical" size={50} style={{width: "100%"}}>
<Upload.Dragger
name="file"
customRequest={onUpload}
listType="picture"
>
</Upload.Dragger>
<Image.PreviewGroup
preview={{
// Displays the image name
countRender: (current) => data?.data[current - 1].id.split("/").at(-1),
}}>
<Flex wrap="wrap" gap="small">
{data?.data.map((media, index) => (
<Image
key={index}
width={300}
height={300}
style={{objectFit: 'cover'}}
src={media.srcUrl}
/>
))}
</Flex>
</Image.PreviewGroup>
</Space>
</List>
);
