You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The bug that I have found is causing all elements below the dropzone to not be clickable.
It's caused by one of 2 things: either z-indexes or the way of positioning the elements needs to be changed.
.filepond--list-scroller has a height of 100% (so it inherits from the parent -> 76px) & it's translated by 76px, so it looks like on the screenshot below. Because of that the z-indexes on child elements are not playing along with the other elements on the page.
A simple solution, that I'm currently using is changing position: absolute & transform: translate3d() to just flex layout.
I am using the React library, but the problem refers to styling, so I though creating the issue in the main repo is the way.
But the setup using React looks like that:
'use client';import'filepond/dist/filepond.min.css';import'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';import'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';import'./upload-dropzone.css';import{FilePond,registerPlugin}from'react-filepond';importFilePondPluginImageExifOrientationfrom'filepond-plugin-image-exif-orientation';importFilePondPluginImagePreviewfrom'filepond-plugin-image-preview';importFilePondPluginFileValidateTypefrom'filepond-plugin-file-validate-type';importFilePondPluginFilePosterfrom'filepond-plugin-file-poster';import{useRef}from'react';import{useCreateUpload}from'@/api/upload';// filepond pluginsregisterPlugin(FilePondPluginFileValidateType,FilePondPluginImageExifOrientation,FilePondPluginImagePreview,FilePondPluginFilePoster,);interfaceUploadDropzoneProps{teamId?: string;}exportconstUploadDropzone=({ teamId }: UploadDropzoneProps)=>{const{mutateAsync: createUpload}=useCreateUpload();constref=useRef<FilePond>(null);return(<FilePondacceptedFileTypes={['image/png','image/jpeg','image/gif','video/mp4','video/mov',]}allowFilePoster// allowImageCrop// allowImageResize// allowImageTransformallowMultiplecredits={false}disabled={!teamId}labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'maxFiles={10}name="files"// onprocessfile={(error, file) => {// if (!error && file && ref.current) {// ref.current?.removeFile(file);// }// }}ref={ref}server={{process: async(_fieldName,file,_metadata,load,error,_progress,_abort,)=>{try{if(!teamId){thrownewError('No team selected');}constformData=newFormData();formData.append('teamId',teamId);formData.append('file',file);awaitcreateUpload({body: formData,});load('done');}catch(e){error('Error uploading file');}},}}stylePanelLayout="compact"/>);};
Is there an existing issue for this?
Have you updated FilePond and its plugins?
Describe the bug
The bug that I have found is causing all elements below the dropzone to not be clickable.
It's caused by one of 2 things: either z-indexes or the way of positioning the elements needs to be changed.
.filepond--list-scroller has a height of 100% (so it inherits from the parent -> 76px) & it's translated by 76px, so it looks like on the screenshot below. Because of that the z-indexes on child elements are not playing along with the other elements on the page.
A simple solution, that I'm currently using is changing
position: absolute
&transform: translate3d()
to just flex layout.Reproduction
I am using the React library, but the problem refers to styling, so I though creating the issue in the main repo is the way.
But the setup using React looks like that:
Environment
The text was updated successfully, but these errors were encountered: