Aivirth Posts - Answer Overflow

Aivirth

•Created by Aivirth on 2/4/2025 in #❓┊help

How to manage Spatie Media Library Custom Properties

I'm in need to give the option to users in my panel to edit an alt and title fields to an uploaded image. I tried to load and set custom properties through child components and other methods but nothing worked so far. I could try to use a pivot model to store those values but it seems redudant, anyone managed to find a solution ?

2 replies

FFilament

•Created by Aivirth on 1/9/2025 in #❓┊help

Stop FilePond from appending -v<number> to file names

I'm in the process of customizing the ralphjsmit media library plugin for my needs and i noticed that my file names are always changed to be appended with -v<number> once i edit them through the ->imageEditor method of the underlying SpatieMediaLibraryFileUpload component. I managed to track the issue to the filepond configuration in the vendor/filament/forms/resources/js/components/file-upload.js file to be exact on the line 689 :

this.$nextTick(() => {
    this.shouldUpdateState = false;

    let editingFileName = this.editingFile.name.slice(
        0,
        this.editingFile.name.lastIndexOf(".")
    );
    let editingFileExtension = this.editingFile.name
        .split(".")
        .pop();

    if (editingFileExtension === "svg") {
        editingFileExtension = "png";
    }

    const fileNameVersionRegex = /-v(\d+)/;

    if (fileNameVersionRegex.test(editingFileName)) {
        editingFileName = editingFileName.replace(
            fileNameVersionRegex,
            (match, number) => {
                const newNumber = Number(number) + 1;

                return `-v${newNumber}`;
            }
        );
    } else {
        editingFileName += "-v1";
    }

    this.pond
        .addFile(
            new File(
                [croppedImage],
                `${editingFileName}.${editingFileExtension}`,
                {
                    type:
                        this.editingFile.type ===
                            "image/svg+xml" ||
                        hasCircleCropper
                            ? "image/png"
                            : this.editingFile.type,
                    lastModified: new Date().getTime(),
                }
            )
        )
        .then(() => {
            this.closeEditor();
        })
        .catch(() => {
            this.closeEditor();
        });
});

this.$nextTick(() => {
    this.shouldUpdateState = false;

    let editingFileName = this.editingFile.name.slice(
        0,
        this.editingFile.name.lastIndexOf(".")
    );
    let editingFileExtension = this.editingFile.name
        .split(".")
        .pop();

    if (editingFileExtension === "svg") {
        editingFileExtension = "png";
    }

    const fileNameVersionRegex = /-v(\d+)/;

    if (fileNameVersionRegex.test(editingFileName)) {
        editingFileName = editingFileName.replace(
            fileNameVersionRegex,
            (match, number) => {
                const newNumber = Number(number) + 1;

                return `-v${newNumber}`;
            }
        );
    } else {
        editingFileName += "-v1";
    }

    this.pond
        .addFile(
            new File(
                [croppedImage],
                `${editingFileName}.${editingFileExtension}`,
                {
                    type:
                        this.editingFile.type ===
                            "image/svg+xml" ||
                        hasCircleCropper
                            ? "image/png"
                            : this.editingFile.type,
                    lastModified: new Date().getTime(),
                }
            )
        )
        .then(() => {
            this.closeEditor();
        })
        .catch(() => {
            this.closeEditor();
        });
});

however i have no idea which is the best way to override or change this behavior to suit my needs.

2 replies

FFilament

•Created by Aivirth on 12/16/2024 in #❓┊help

How to properly add custom js files to Filament panel.

I'm in the process of building a custom alpine component which i'm using in a specific custom page of the panel, so far so good. Everything works properly in local but when i deployed the project to production i encountered an error where the file was aggressively cached which caused the entire thing to blow up by not loading the newest version of it, the only solution i found at the time was to change the name of the script. This brought me to believe my approach to the entire thing was faulty, right now i'm including the script directly in the boot method of the custom page

\Filament\Support\Facades\FilamentAsset::register([
            \Filament\Support\Assets\Js::make('taskjob-recorder', __DIR__ . '/../../resources/js/taskjob-recorder.js'),
        ]);

\Filament\Support\Facades\FilamentAsset::register([
            \Filament\Support\Assets\Js::make('taskjob-recorder', __DIR__ . '/../../resources/js/taskjob-recorder.js'),
        ]);

I tried to change my approaching by registering the script into AppServiceProvider which worked, unless i called the ->loadedOnRequest method to allow the x-load-js to lazyload it in that case it never managed to register the file at the bottom of the page as the documentation says, Is there a better approach to this ? it would also help in the future to know how to include npm packages into the panel and in specific pages if possible.

2 replies

Gaming

Programming