search

pqina / react-filepond

🔌 A handy FilePond adapter component for React
https://pqina.nl/filepond
MIT License
1.86k stars 90 forks source link

image preview isn't display on giving filelinks to filepond #244

Closed lsdev200 closed 6 months ago

lsdev200 commented 6 months ago

Is there an existing issue for this?

Have you updated React FilePond, FilePond, and all plugins?

Describe the bug

It appears that the image preview isn't displaying when providing file links to FilePond. Essentially, I'm retrieving data as links, but I desire to showcase image previews while fetching data from the database. i am doing this: files={imageLinks?.map((link) => ({ source: link, options: { type: "limbo", }, }))} here is print screen: https://prnt.sc/t9zJo4GxN22t

waiting for your response, sincerely.

Reproduction

It appears that the image preview isn't displaying when providing file links to FilePond. Essentially, I'm retrieving data as links, but I desire to showcase image previews while fetching data from the database. i am doing this: files={imageLinks?.map((link) => ({ source: link, options: { type: "limbo", }, }))} here is print screen: https://prnt.sc/t9zJo4GxN22t

waiting for your response, sincerely.

Environment

- Device:pc
- OS:windows 10
- Broser:chrome
- React version:next js 14
rikschennink commented 6 months ago

As you post this on the react-filepond repo it's likely you haven't loaded the image preview plugin.

lsdev200 commented 6 months ago

import "filepond/dist/filepond.min.css"; import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"; import "filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css";

import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"; import FilePondPluginImagePreview from "filepond-plugin-image-preview"; import FilePondPluginImageCrop from "filepond-plugin-image-crop"; import FilePondPluginImageResize from "filepond-plugin-image-resize"; import FilePondPluginImageTransform from "filepond-plugin-image-transform"; import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type"; import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";

registerPlugin( FilePondPluginFileValidateSize, FilePondPluginFileValidateType FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImageCrop, FilePondPluginImageResize, FilePondPluginImageTransform );

i already adding this. still not displaying

rikschennink commented 6 months ago

Can you reproduce the issue here? https://codesandbox.io/p/sandbox/react-filepond-live-demo-iw9ri