Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

filepond--list-scroller overlays other elements [Bug] #957

Open
2 tasks done
nightspite opened this issue Jan 16, 2024 · 5 comments
Open
2 tasks done

filepond--list-scroller overlays other elements [Bug] #957

nightspite opened this issue Jan 16, 2024 · 5 comments
Labels

Comments

@nightspite
Copy link

nightspite commented Jan 16, 2024

Is there an existing issue for this?

  • I have searched the existing issues

Have you updated FilePond and its plugins?

  • I have 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.

CleanShot 2024-01-16 at 18 58 16@2x

A simple solution, that I'm currently using is changing position: absolute & transform: translate3d() to just flex layout.

.filepond--root {
  display: flex !important;
  flex-direction: column !important;
}

.filepond--drop-label {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
}

.filepond--list-scroller {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
  height: auto !important;
  flex: 1 !important;
}

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:

'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';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import { useRef } from 'react';
import { useCreateUpload } from '@/api/upload';

// filepond plugins
registerPlugin(
  FilePondPluginFileValidateType,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginFilePoster,
);

interface UploadDropzoneProps {
  teamId?: string;
}

export const UploadDropzone = ({ teamId }: UploadDropzoneProps) => {
  const { mutateAsync: createUpload } = useCreateUpload();
  const ref = useRef<FilePond>(null);

  return (
    <FilePond
      acceptedFileTypes={[
        'image/png',
        'image/jpeg',
        'image/gif',
        'video/mp4',
        'video/mov',
      ]}
      allowFilePoster
      // allowImageCrop
      // allowImageResize
      // allowImageTransform
      allowMultiple
      credits={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) {
              throw new Error('No team selected');
            }
            const formData = new FormData();

            formData.append('teamId', teamId);
            formData.append('file', file);

            await createUpload({
              body: formData,
            });
            load('done');
          } catch (e) {
            error('Error uploading file');
          }
        },
      }}
      stylePanelLayout="compact"
    />
  );
};

Environment

- Device: Macbook Pro M1 Max
- OS: MacOS Ventura 13.4.1 (22F82)
- Browser: Arc Version 1.25.1 (45028)

Npm packages
- "react": "18.2.0",
- "react-dom": "18.2.0",
- "react-filepond": "^7.1.2",
- "filepond-plugin-file-poster": "^2.5.1",
- "filepond-plugin-file-validate-type": "^1.2.8",
- "filepond-plugin-image-crop": "^2.0.6",
- "filepond-plugin-image-edit": "^1.6.3",
- "filepond-plugin-image-exif-orientation": "^1.0.11",
- "filepond-plugin-image-preview": "^4.6.12",
- "filepond-plugin-image-resize": "^2.0.10",
- "filepond-plugin-image-transform": "^3.8.7",
@nightspite nightspite added the bug label Jan 16, 2024
@KrunchMuffin
Copy link

@nightspite This is great. Thanks! Flex is the way to go.

@bbredewold
Copy link

bbredewold commented Aug 8, 2024

Yeah it seems to apply this styling in certain layout render modes:

&[data-style-panel-layout~='compact'],
&[data-style-panel-layout~='integrated'] {
& .filepond--list-scroller {
overflow: hidden;
height: 100%;
margin-top: 0;
margin-bottom: 0;
}

Disabling the height and overflow property fixes it. But why were these props there in the first place?
But looking the age of this issue...

@rikschennink
Copy link
Collaborator

I'm not sure why it's positioned outside/below the box in this situation. Will look into it when I have some time. Currently working on v5 which won't have this issue.

@bbredewold
Copy link

I'm not sure why it's positioned outside/below the box in this situation. Will look into it when I have some time. Currently working on v5 which won't have this issue.

I get that, no problem ;)
Maybe I can fix things, but where can I find examples of the Filepond instances in compact and integrated modes?

@rikschennink
Copy link
Collaborator

@bbredewold Appreciate the offer. Have to admit that these aren't well documented.

It's controlled with the stylePanelLayout referenced in the property table on this page, I've copied it below:

Set a different layout render mode. Can be either 'integrated''compact', and/or 'circle'. Compact mode will remove padding, integrated mode is used to render FilePond as part of a bigger element. Circle mode adjusts the item position offsets so buttons and progress indicators don't fall outside of the circular shape.

The circle mode can be seen on the homepage, it's the profile picture example. I don't think I have an example of the integrated mode, but it's apart from some margins I believe it's very similar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants