Aivirth
Aivirth
PostsComments
FFilament
Created by Aivirth on 2/17/2025 in #❓┊help
Using Spatie Media Library on Create
I'm having an issue trying to use the SpatieMediaLibraryFileUpload component on creation of a new resource entry. It's giving me a missing model_id for the sql insert, which make sense since technically the model is not created yet, but i was wondering if there's a way to make filament create the db entry for media after my new record has been created so the association is successful.
4 replies
FFilament
Created by Aivirth on 2/10/2025 in #❓┊help
Weird behavior in nested repeater relationship
I noticed a weird side effect while trying to create a nested relationship with repeaters. When i add items to the relationship promo everything works correctly but as soon as the form fills again after submit it only shows 1 element. Refreshing the page shows the correct number of elements. postpromopreset is defined as a HasMany relationship on the Post model
postpromopreset_promo is defined as a HasMany relationship on the Postpromopreset model to a pivot model called PostpromopresetPromo I know the names are confusing but i'm still prototyping the entire thing, the idea is to create a series of preset of promos which then i can use inside the Post model in a select 
Repeater::make('Promos')
  ->relationship(name: 'postpromopreset' )
  ->label('Presets')
  ->schema([
      TextInput::make('name')
          ->label(__('Name')),
      Repeater::make('promotions')
          ->label('Promo')
          ->relationship(name:'postpromopreset_promo')
          ->reorderable()
          ->reorderableWithDragAndDrop()
          ->reorderableWithButtons()
          ->orderColumn('order_column')
          ->schema([
              Select::make('promo_id')
                  ->relationship(
                      name:'promo',
                      titleAttribute:'title'
                  )
                  ->disableOptionsWhenSelectedInSiblingRepeaterItems()

          ])
          ->grid(4)

  ])
Repeater::make('Promos')
  ->relationship(name: 'postpromopreset' )
  ->label('Presets')
  ->schema([
      TextInput::make('name')
          ->label(__('Name')),
      Repeater::make('promotions')
          ->label('Promo')
          ->relationship(name:'postpromopreset_promo')
          ->reorderable()
          ->reorderableWithDragAndDrop()
          ->reorderableWithButtons()
          ->orderColumn('order_column')
          ->schema([
              Select::make('promo_id')
                  ->relationship(
                      name:'promo',
                      titleAttribute:'title'
                  )
                  ->disableOptionsWhenSelectedInSiblingRepeaterItems()

          ])
          ->grid(4)

  ])
7 replies
FFilament
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 ?
3 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