Tweak file upload layout, add filepond-plugin-media-preview, add disable preview option

[jacksleight]

This PR makes some minor tweaks to the compact file upload layout, so that it fits nicely with the other fields and is actually a bit more compact. Changes are:

• The min-height on the drop area element has been tweaked so it that it's the same height as the uploading/file element, removing the dead space below the field when a value is set
• The padding on the uploading/file element has been tweaked so it renders at exactly 42px high, the same height as Filament single line fields
• The drop area label text size has been reduced slightly, so it will fit at smaller widths
• The dark mode background on the drop area element has been removed, as it covers the border and the root element already has the right background colour

This PR also adds a disablePreview() method, to switch off the image preview feature.

These changes allow for a very compact and consistently sized single file upload field that fits alongside other fields.

Before:

After:

Blank values:

Also includes filepond-plugin-media-preview feature from #1643

[danharrin]

I think I actually prefer compact as a default. What does it look like with the image preview?

[jacksleight]

Yeah me too. With preview:

And multiple files (without preview):

Wondering if a line between the multiple items might be good idea as well?

[danharrin]

Yeah, multi file spacing is a must. Then, we can use a compact layout by default :)

Make sure that the ->avatar() layout isnt broken by any of this, btw.

[jacksleight]

Added some spacing:

At the moment these changes have no impact on the avatar() layout, as that uses compact circle and the styles target compact only.

The only thing I've (just) done is set the initial min-height correctly on an avatar upload, so that doesn't cause a height change when FilePond loads.

[jacksleight]

@danharrin @saade

One hiccup. Despite the allowVideoPreview and allowAudioPreview options existing in filepond-plugin-media-preview:

https://github.com/nielsboogaard/filepond-plugin-media-preview/blob/db25fa6ea9424a1d4679f311dbd0904f1228ed95/src/js/index.js#L59

It doesn't look like they're actually implemented (as far as I can see).

Not sure if there's another way we can disable the plugin or if we'd need to wait for filepond-plugin-media-preview to fix it?

[saade]

@danharrin @saade

One hiccup. Despite the allowVideoPreview and allowAudioPreview options existing in filepond-plugin-media-preview:

https://github.com/nielsboogaard/filepond-plugin-media-preview/blob/db25fa6ea9424a1d4679f311dbd0904f1228ed95/src/js/index.js#L59

It doesn't look like they're actually implemented (as far as I can see).

Not sure if there's another way we can disable the plugin or if we'd need to wait for filepond-plugin-media-preview to fix it?

idk if @nielsboogaard will ever implement this. although the repo had an update 5 days ago, npm does not received a new version since June 2021. Me and @danharrin talked about forking this and maintain it ourselves. If thats ok, i can fork and make the chages, or feel free if you want to

[jacksleight]

Yeah it doesn't look like it's that frequently updated. If you can fork it and implement those options that'd be great!

[nielsboogaard]

Hey guys, thanks for mentioning me. Could you elaborate a bit more about what needs to be implemented in the media preview plugin?

[saade]

Hey guys, thanks for mentioning me. Could you elaborate a bit more about what needs to be implemented in the media preview plugin?

Hey! Nice to see you!

We need allowVideoPreview and allowAudioPreview to be configurable, it doesn't seem to have effect right now.
Also, this nielsboogaard/filepond-plugin-media-preview/pull/14 looks like a good thing to have, since we always want to offer customizability for people using filament

[saade]

also, @nielsboogaard all of your filepond plugins seems to fit very nice with filament, but we also need the security patches at least :)

[nielsboogaard]

Clear. Will have a look this afternoon at the mentioned configuration options. Will also create a release soonish containing the security fixes.

[saade]

Clear. Will have a look this afternoon at the mentioned configuration options. Will also create a release soonish containing the security fixes.

Thank you!

[nielsboogaard]

Configuration options are taken into account now, and all dependencies are bumped to latest version. See https://github.com/nielsboogaard/filepond-plugin-media-preview, if you use latest version 1.0.11 you should be good to go.

[jacksleight]

Brilliant. Can confirm Filament's disablePreview() option is now working with video and audio files.

Thanks Niels!

[jacksleight]

Should I set the default FileUpload layout to compact now? I think that's the last thing outstanding...

[saade]

I think so

[saade]

@danharrin can we get this merged? Really needing this 😛

[danharrin]

Perfect! Thank you so much.

[robertorinaldi-dev]

Added some spacing:

At the moment these changes have no impact on the avatar() layout, as that uses compact circle and the styles target compact only.

The only thing I've (just) done is set the initial min-height correctly on an avatar upload, so that doesn't cause a height change when FilePond loads.

The spacing seems to work only with 2 files, not more

[jacksleight]

@robertorinaldi-dev Thanks, have submitted a fix.