Grid view enhancements

[tomdav999]

Thanks for this amazing library, much appreciated! As much as I am thrilled with it, I am finding horizontal grid display to be a bit frustrating to style. A couple suggestions.

1. Would it be possible to eliminate the CSS "hacking" required for grid view? Currently an inordinate number of CSS media queries is needed, for example, this is very painful!

.filepond--item {
    width: calc(100% / 2 - .5em);
}
@media (min-width: 500px) {
    .filepond--item {
        width: calc(100% / 3 - .5em);
    }
}
@media (min-width: 700px) {
    .filepond--item {
        width: calc(100% / 4 - .5em);
    }
}
@media (min-width: 900px) {
    .filepond--item {
        width: calc(100% / 5 - .5em);
    }
}
@media (min-width: 1100px) {
    .filepond--item {
        width: calc(100% / 6 - .5em);
    }
}
@media (min-width: 1300px) {
    .filepond--item {
        width: calc(100% / 7 - .5em);
    }
}
@media (min-width: 1500px) {
    .filepond--item {
        width: calc(100% / 8 - .5em);
    }
}
@media (min-width: 1700px) {
    .filepond--item {
        width: calc(100% / 9 - .5em);
    }
}
@media (min-width: 1900px) {
    .filepond--item {
        width: calc(100% / 10 - .5em);
    }
}

Why not add a gridItemMaxWidth parameter to define grid view and have filepond calculate the width of grid items based on this parameter? For example, let's say gridItemMaxWidth = 250px and grid width is constrained to 800px by the viewport. filepond would calculate the number of columns = Math.ceil(800 / 250) = 4 and style the grid item width = 800px / 4 columns = 200px. Alternatively, if specifying gridItemMinWidth = 250px, number of columns = Math.max(1, Math.floor(800 / 250)) = 3. This should be easy to implement since filepond is already dynamically positioning and styling the items in the grid. I'm confused by the need to hack via media query?

2. Would it be possible to add an option (for grid view) to convert the drop area to grid item once an item has been added to the pond? For example, instead of this:

Display this:

Note this is how facebook does it. They have invested a lot of money in usability studies, so why not leverage best practices? ;)

The reason to do this is to optimize vertical real estate which is at a premium in the typical use case, such as attaching items below an input field. Every little bit helps, and it is also more intuitive where the next image will be added (in this case to the right of the first image).

To free up space used by the drop area I have tried to move the drop area below the grid, but this isn't possible to do without hacking the code because filepond always moves the grid below the drop area. Having an option to make the drop area an element in the grid would also rectify this issue.

[rikschennink]

1. That could be possible but I felt it was better to leave this up to CSS as it's a CSS layout thing. Not something I'm going to change for this major version, if a new version of FilePond is coming layout will probably be even more CSS oriented instead of less.

2. I'm not sure how this would then allow ordering files, can files only be dropped on the file drop area that just moved to the right, etc.

They have invested a lot of money in usability studies

That is a quite the assumption :) wasn't their mantra "move quick and fail fast" or something?

Anyway, I don't see this happening soon but I'll leave it open so I can revisit when I get time to build a new version of FilePond.

[vesper8]

I agree the grid needs work.. for starters it would be nice if it utilized the actual grid directive instead of just calculating the width, this way we could make use of things like grid auto flow and grid gap

Currently it's not very easy to make the grid responsive or to adjust things like the grid gap

[vesper8]

I hacked it up a bit and am finding some good success with this (using Tailwind here). Simply adding this creates a beautiful grid and then you can use Tailwind responsive prefixes to change the number of rows/columns/gaps based on screen size

.filepond--item {
  @apply relative m-0 !important;
  transform: none !important;
}

.filepond--list {
  @apply grid grid-cols-3 gap-x-2 gap-y-2 m-0 !important;
}

[blackjak231]

I hacked it up a bit and am finding some good success with this (using Tailwind here). Simply adding this creates a beautiful grid and then you can use Tailwind responsive prefixes to change the number of rows/columns/gaps based on screen size

.filepond--item {
  @apply relative m-0 !important;
  transform: none !important;
}

.filepond--list {
  @apply grid grid-cols-3 gap-x-2 gap-y-2 m-0 !important;
}

This works fine until you activate reordering. We would need a class applied to the root element indicating when dragging starts so that we can enable movement !

[stormitornado]

I hacked it up a bit and am finding some good success with this (using Tailwind here). Simply adding this creates a beautiful grid and then you can use Tailwind responsive prefixes to change the number of rows/columns/gaps based on screen size

.filepond--item {
  @apply relative m-0 !important;
  transform: none !important;
}

.filepond--list {
  @apply grid grid-cols-3 gap-x-2 gap-y-2 m-0 !important;
}

This works fine until you activate reordering. We would need a class applied to the root element indicating when dragging starts so that we can enable movement !

I've tried such a thing, but you can't just remove translate: none !important because the grid will destroy. And reordering is based on translate. I really need behavior 2 (inline drop area) with reordering, but there is no way to do it. Maybe with JS somehow

[polem]

@rikschennink i'd like submit a PR removing all transforms and manage it with CSS, do you think it worth it ?

[rikschennink]

@rikschennink i'd like submit a PR removing all transforms and manage it with CSS, do you think it worth it ?

I appreciate the suggestion but I can’t at this point change this part of FilePond.

The FilePond v5 grid is going to be fully controlled by CSS, you can then use flexbox or grid or something else. The view is going to be detached from the model so you could also choose to build your own view.

[KrunchMuffin]

do you have an idea of release date by chance?

[rikschennink]

@KrunchMuffin nope, when it's done. Hopefully before summer.