filepond gives error while using with iframe, it will throw `Uncaught TypeError: Cannot read property 'removeChild'

[rohanvachheta]

Describe the bug

While using file pond library inside iframe it will throw Uncaught TypeError: Cannot read property 'removeChild' of null at Object.didRemoveItem [as DID_REMOVE_ITEM] (file pond.js:10064) while removing file . this will only happen when you're providing valid files. if there is any invalid file then it won't happen .also it will happen for the first time only.

Logs

Uncaught TypeError: Cannot read property 'removeChild' of null at Object.didRemoveItem [as DID_REMOVE_ITEM] (filepond.js:10064) at eval (filepond.js:1485) at Array.forEach (<anonymous>) at eval (filepond.js:1484) at eval (filepond.js:1145) at Array.forEach (<anonymous>) at Object._write (filepond.js:1144) at eval (filepond.js:1174) at Array.forEach (<anonymous>) at Object._write (filepond.js:1172)

To Reproduce

To help us help you if you've found a bug please consider the following:

• click on upload file, select valid files
• if you select valid files for removal and you will get this error

Expected behavior

The file should be removed without giving an error

Information about your project:

• chrome latest version
• file pond latest version
• ubuntu 18.4

Additional context

[rikschennink]

From the screenshot I got in my email it looks like this is running in an application.

Please create a public and concise test case at codesandbox.io, happy to take a look. Will close this issue till the test case is live, please reply with URL to test case.

Please follow the steps below:

1. Fork this repository: https://codesandbox.io/s/vanilla-filepond-jtl2t
2. Reproduce the issue in your fork.
3. Reply with the URL to your test case.

[rohanvachheta]

https://codesandbox.io/s/react-filepond-live-demo-forked-rn4it?file=/src/index.js here is codesandbox link and here is a video how can you generate this https://www.awesomescreenshot.com/video/2063126

[rikschennink]

@rohanvachheta the video doesn't work.

The codesandbox doesn't load styles.

[rohanvachheta]

@rikschennink just click on drag and drop and upload files, I know CSS didn't apply because there is an iframe. the reason maybe things are breaking with file pond is it finds an element from dom which is not there because of the iframe .can you please check again

https://www.awesomescreenshot.com/video/2063126?key=2cb7fab9c5464e782a7a1114f7df2771

[rohanvachheta]

@rikschennink hey, is there any update or I require to create another issue same as this?

[rikschennink]

No, there's no update. Simply haven't had time to look at this yet. The CSS not being loaded isn't helping. Please don't create additional issues.

[pmehta18]

@rohanvachheta Try wrapping the FilePond component within FrameContextConsumer which provides reference to iframe's document and window object. Refer here.

[rohanvachheta]

@rikschennink now the styles are included. can you please update if you get a solution

@pmehta18 I've tried that but file pond does not provide any props for passing different dom object .so it is actually trying to manipulate the things which do not exist in the dom and we get an error.

[rikschennink]

@rohanvachheta I'll look into it again this week.

[rikschennink]

I'm not sure why this happens. I've taken another look but CodeSandbox itself is based on frames and in all other demos FilePond works correctly, so I would think it's related to how the react-styled-frame is rendered?

[rohanvachheta]

@rikschennink react-style-frame renders the iframe only , i guess it is due to the DOM which filepond takes is the windows object and in iframe the Dom is different from windows , when i try to load library of yours it loads under iframe but operation it try to perform under windows main Dom object . @rikschennink do you have any solution for that .

[rikschennink]

@rohanvachheta I've successfully tested FilePond in iframes, how do you explain it working in codesandbox itself?

[rohanvachheta]

@rikschennink in codesanbox they're generating url based on changes and that url got passed into iframe . here in which if you try using react-frame-component or any iframe library where you can append react component ,filepond will fail .here react-frame-component in that they're also providing different document object which shows there are some difference , check this out @rikschennink https://github.com/ryanseddon/react-frame-component