Filament•14mo ago

Image upload preview

I have a list of images on one of my models that is set up with a one to many relationship. When I edit one of the images, I can upload the image and see the preview just fine, but if there was an image already set it doesn't show it and I'm not quite sure how to fix that or show the image on my edit modal.

17 Replies

Davide Cariola•14mo ago

I remember something similar in Laravel Nova. Have you tried to change in your .env file the APP_URL key? By default it'll be APP_URL=http://localhost. Try like this:APP_URL=http://localhost:8000 or APP_URL=http://127.0.0.1:8000

trevorOP•14mo ago

I'm using Laravel Herd so the APP_URL is http://domain.test and the preview of the image in the table works fine, but I will play with that to make sure it is what it should be. It looks like it is set correctly and I verified that the images show up correctly in my preview. Does the ImageUpload support previewing existing files on the model? Thanks for the help by the way!

Davide Cariola•14mo ago

I'm working with avatars right now. Maybe I can be of help sooner or later

trevorOP•14mo ago

Thats no problem, take your time 🙂

Davide Cariola•14mo ago

Ok, to me it works with this: UserResource form

->schema([
  FileUpload::make('avatar')
      ->image()
      ->imageEditor()
      ->imageEditorAspectRatios([
          '16:9',
          '4:3',
          '1:1',
      ])
      ->columnSpan('full')
])

->schema([
  FileUpload::make('avatar')
      ->image()
      ->imageEditor()
      ->imageEditorAspectRatios([
          '16:9',
          '4:3',
          '1:1',
      ])
      ->columnSpan('full')
])

UserResource table

->columns([
    ImageColumn::make('avatar')
        ->circular(),
])

->columns([
    ImageColumn::make('avatar')
        ->circular(),
])

file .env: APP_URL=http://localhost:8000 Images are saved in the storage and storage:link is active. With this I can see the image in the table, when creating a new user and when editing

trevorOP•14mo ago

I do have something similar to this for an image directly on my model and that is working great. But I think my issue comes from the Realation Manager. I have a 'Robot' resource that can have multiple images. I've set that up in my ImagesRelationManager class in a similar manner to what you shown for your avatar. So instead of an image directly on my Robot model, I have another table that it is pulling from and displaying in a table on my Robot resource

awcodes•14mo ago

can you share the code for your Robot images form?

trevorOP•14mo ago

public function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('alt_text')
                ->required()
                ->maxLength(255),
            Forms\Components\FileUpload::make('image_path')
                ->image()
                ->label("Image")
        ]);
}

public function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('alt_text')
                ->required()
                ->maxLength(255),
            Forms\Components\FileUpload::make('image_path')
                ->image()
                ->label("Image")
        ]);
}

This is in my Relation Manager class for the Images

awcodes•14mo ago

Ok, you said the images are a relationship? But there’s no relationship set up for the FileUpload. Is that correct? Even without a relationship the image should be ->multiple(), right?

trevorOP•14mo ago

I have a Robot model which is a one to many relationship to my RobotImages table. The image on this form is just one instance of the RobotImages, so it should only be a single image. So a robot can have multiple images, and they are all listed out in a table on my robot resource. Let me know if that makes more sense

trevorOP•14mo ago

List of images on my Robot page

awcodes•14mo ago

It doesn’t make sense, sorry. If a robot can have multiple images, then your relationship is wrong. You can’t do a HasMany or belongsToMany for the FileUpload expecting it to be a single relationship record.

trevorOP•14mo ago

So in the table generated by the Relation Manager, when I click edit on one of the RobotImages wouldn't that be a single record? It displays the alt_text in that edit modal which is another field on my RobotImages table.

trevorOP•14mo ago

If that doesn't clear up my question though, no worries. I'll re-read the relationship docs again to see if I'm missing something 🙂

awcodes•14mo ago

If the relationship is multiple images then, no it wouldn’t be a single record. It would be an array of records. Meaning the FileUpload would have to be multiple for the relation to also work. If your relationship was a 1:1 then it would work.

trevorOP•14mo ago

It actually ended up being something else entirely. I had a custom attribute in my Image model that would generate an asset string for the image path, and the ImageColumn in the table would take the asset and display the image, but the preview in the edit modal did not. Thank you for the help 🙂

Gaming

Programming

Image upload preview