Filament•4mo ago

Register Filepond Plugin

There is a similar post here : https://discord.com/channels/883083792112300104/1151432989276913674 Is there a way to register a plugin for FileUpload without overriding the whole thing? I've tried all the solutions mentioned in the above thread - except for the suggestion to override the entire file-upload.js file. Here are some of the things I tried.

FilamentAsset::register([
    Js::make('filepond-config', __DIR__.'/../../resources/js/filepond-config.js'),
    Js::make('filepond-config', Vite::asset('resources/js/filepond-config.js')),
]);

FilamentView::registerRenderHook( PanelsRenderHook::SCRIPTS_AFTER,
    fn (): string => Blade::render("@vite('resources/js/filepond-config.js')")
);

FilamentAsset::register([
    Js::make('filepond-config', __DIR__.'/../../resources/js/filepond-config.js'),
    Js::make('filepond-config', Vite::asset('resources/js/filepond-config.js')),
]);

FilamentView::registerRenderHook( PanelsRenderHook::SCRIPTS_AFTER,
    fn (): string => Blade::render("@vite('resources/js/filepond-config.js')")
);

// This is just the latest example. The code is from the FilePond documentation
// https://pqina.nl/filepond/docs/api/plugins/file-rename/
import FilePondPluginFileRename from 'filepond-plugin-file-rename';

window.FilePond.registerPlugin(FilePondPluginFileRename);

document.addEventListener("DOMContentLoaded", function(event) {
    window.FilePond.setOptions({
        fileRenameFunction: (file) =>
            new Promise((resolve) => {
                resolve(window.prompt('Enter new filename', file.name));
            }),
    });
});

// This is just the latest example. The code is from the FilePond documentation
// https://pqina.nl/filepond/docs/api/plugins/file-rename/
import FilePondPluginFileRename from 'filepond-plugin-file-rename';

window.FilePond.registerPlugin(FilePondPluginFileRename);

document.addEventListener("DOMContentLoaded", function(event) {
    window.FilePond.setOptions({
        fileRenameFunction: (file) =>
            new Promise((resolve) => {
                resolve(window.prompt('Enter new filename', file.name));
            }),
    });
});

None of the above work for different reasons (obviously, I may be doing something wrong). One of the problems is that the filepond stuff is loaded only when needed so it's not always available. So, is there a way to install FilePond plugins ? Thank you.

11 Replies

ChesterSOP•4mo ago

https://tenor.com/view/kitten-pet-cat-halp-meow-gif-8381852

Tenor

halp

elmudometal•3w ago

Hi man, were you able to solve this?

ChesterSOP•19h ago

No sorry I kinda gave up because I didn't like any of the possible solutions I could think off 😦 Please let me know if you figure it out 🙇‍♂️

elmudometal•16h ago

I was trying to test this way but in the end I ended up making an extended fileupload plugin what did you want to achieve with this js?

ChesterSOP•14h ago

I wanted to enable the plugin that allows renaming of file uploads (https://pqina.nl/filepond/docs/api/plugins/file-rename/)

Easy File Uploading With JavaScript | FilePond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

elmudometal•14h ago

elmudometal•14h ago

I make this component by using the name in the media library

ChesterSOP•14h ago

What do you mean? Can you share it?

elmudometal•13h ago

https://github.com/elmudometal/filament-custom-attribute-file-upload This plugin takes the input in the image and saves it in the name field of the media library space

GitHub

GitHub - elmudometal/filament-custom-attribute-file-upload: compone...

component to add custom name to image attributes for captions - elmudometal/filament-custom-attribute-file-upload

elmudometal•13h ago

I don't know if it's what you're looking for For now it is only working with spatie media library. In the next update I will add compatibility with native fileupload.

ChesterSOP•13h ago

Thanks, I'll have a look 🙇‍♂️

Gaming

Programming

Register Filepond Plugin

Did you find this page helpful?