FileUpload on edit page
I have a standalone table with actions. One of the actions is Edit which takes me to the edit page where I have a standalone form. There I have some Placeholders and Text Inputs, which all load the information about my package just fine. I then have a TableRepeater with a TextInput and a FileUpload. The Repeater is designed to hold information about documents that belong to the package. I can display the information regarding the document name on the TextInput fine. Still, I have not been able to have the FileUpload get 'loaded' with the image belonging to the document. I have verified all of the recommendations mentioned in the documentation and on some posts here, such as the correct URL, CORS, and path. When creating the record on the 'Create' page, I should mention that the images are saved to S3 with no issues. The issue is on the edit page, which displays no console errors.
Inside my mount method I am doing this:
$this->documents = $package->documents->map(function ($document) {
return [
'document_name' => $this->package->provider === 1
? $document->documentSet1->name
: $document->documentSet2->name,
'file_name' => $document->image->file_name,
];
})->toArray();
$this->form->fill([
'package_name' => $this->package->name,
'created_at' => $this->package->created_at,
'updated_at' => $this->package->updated_at,
'documents' => $this->documents,
]);
and the code for the repeater/FileUpload is this:
Section::make('Document Details')
->schema([
TableRepeater::make('documents')
->columnWidths([
'document_name' => '50%',
])
->schema([
TextInput::make('document_name')
->string()
->label('Document Name')
->disabled(),
FileUpload::make('file_name')
->acceptedFileTypes(['application/pdf', 'image/tiff'])
->disk('s3')
->directory('submitted'),
])
->disableItemMovement()
->disableLabel()
->hideLabels()
->columnSpan(2)
->disableItemCreation()
->disableItemDeletion(),
])
->compact()
->columnSpan(2),
I read a post here about Filament creating a temp URL when using S3, so I am not sure if the issue could be me missing something. Someone else also asked about loading the image on the edit page, but I think it was unanswered.
I have also looked at the demo code, but I do not see anything specific that could be missing.
Lastly, I should add that if I dd($$this->documents) I get something like this which shows the correct image path for each document.
array:2 [▼ // app/Http/Livewire/PackagesEdit.php:41
0 => array:2 [▼
"document_name" => "TestName1"
"file_name" => "submitted/TestName1Image.pdf"
]
1 => array:2 [▼
"document_name" => "TestName2"
"file_name" => "submitted/TestName2Image.pdf"
]
]26 Replies
Try making file_name an array even though it’s only one item.
Making file_name did not work either.
Perhaps what I need is not really supported? can the FileUpload component directly handle files stored on a remote disk like S3?
Yes. You might need to make the visibility of the FileUpload private to get it to work with s3.
I tried that as well and got the same result. Trying to find the issue, I checked the network request in my browser, and looking at the payload, I can see that file_name is empty. I think that could explain why the image is not loaded? Perhaps it could be due to the fact that I am storing file_name in the db inside an images table and not inside the documents table?
Are you not using a relationship to handle that?
Sorry, I had a long meeting, and I couldn't reply right away.
I am using ->relationship() on the repeater to access my documents data, but then 'documents' has a relationship with image and from there I am not sure how it needs to be set up.
My repeater code with the relationship is here:
TableRepeater::make('documents')
->relationship()
->columnWidths([
'document_name' => '50%',
])
->schema([
Placeholder::make('document_name')->content(function ($record) {
$provider = $record->package->provider_id;
if ($provider === 1) {
return $record?->documentTypesSet1->name;
} else if ($provider === 2) {
return $record?->documentTypesSet2->name;
}
return 'Invalid document type';
})
->label('Document Type Name'),
FileUpload::make('file_name')
->acceptedFileTypes(['application/pdf', 'image/tiff'])
->disk('s3')
->directory('submitted'),
])
->disableItemMovement()
->disableLabel()
->hideLabels()
->columnSpan(2)
->disableItemCreation()
->disableItemDeletion(),
FIleUpload above is file_name which is the name of my column in my images table, which has a belongsTo with documents
So I think the issue of why the FileUpload does not load the image is because I have not set a way to tell it to check the relationship documents->image->file_name. Is that even possible here? Or perhaps I misunderstood what you meant when you asked me if I was using a relationship to handle that.
I have also just tried wrapping the FileUpload with a Group like this:
Group::make()
->relationship('image')
->schema([
FileUpload::make('file_name')
->acceptedFileTypes(['application/pdf', 'image/tiff'])
->disk('s3')
->directory('submitted'),
]),
But that throws an error: "Method Filament\Forms\Components\Group::getName does not exist."
I think I have read every possible question here and github, and while some are similar, I have not seen a similar situation.
On one answer someone suggested a group within a group, and I tried that as well but that did not work either.
Group::make()
->schema([
TableRepeater::make('documents')
->relationship('documents')
->columnWidths([
'document_type_name' => '50%',
])
->schema([
Placeholder::make('document_name')->content(function ($record) {
$provider = $record->package->provider_id;
if ($provider === 1) {
return $record?->documentTypesSet1->name;
} else if ($provider === 2) {
return $record?->documentTypesSet2->name;
}
return 'Invalid document type';
})
->label('Document Type Name'),
Group::make()
->relationship('image')
->schema([
FileUpload::make('file_name')
->acceptedFileTypes(['application/pdf', 'image/tiff'])
->disk('s3')
->visibility('private')
->directory('submitted'),
]),
])
->disableItemMovement()
->disableLabel()
->hideLabels()
->columnSpan(2)
->disableItemCreation()
->disableItemDeletion(),Do you have a public repo I could look at or can put together a gist with all the moving parts so I can get a more wholistic view?
Let me put a gist together, and I will get back to you. Thank you for keeping up with the replies. I really appreciate it.
I want to help. My old brain just isn’t keeping up with how all the pieces are fitting together in your app. I’m thinking it’s something simple though.
I am thinking the same. What I am trying to accomplish doesn't look like a super weird case, but yet I am struggling with it.
Here is the gist, I added some comments to try to explain the models a bit more.
Can you provide the models too so I can see the relationships.?
Ok first thing I would try is just calling $this->form-fill() in mount without passing in any values. It should handle all the relationships for you if you aren’t explicitly setting values for the fields.
The record should be handled appropriately since you defined it as the $record property.
Not 100 % sure about the nested relationships though. But that’s where I’d start.
To add a bit more details, not sure if maybe I did not explain this part, but what I am doing is part of my Edit page. I get to this page by clicking on an Edit action on a table.
If I don't pass any values inside mount, my package level fields (the ones inside the first Card) dont get filled out even after matching the name of the components to be the name of the db columns. Also, having the FileUpload inside the Group does not work at all. It gives me the error I mentioned before: Method Filament\Forms\Components\Group::getName does not exist.
If I take the FileUpload outside the Group, it renders but it does not load the image since I have no way to specify that the path is in Image->file_name.
Yea. That’s why I wanted to see a repo. There’s a lot more going on here than the normal workflow.
I get the hesitation to share. But without seeing it all and getting a complete picture I and others trying to help can only guess.
Please try adding following method in your component
I totally understand. The issue is that the main repo has a few pieces that are hard to share without getting into some NDA stuff. If it is okay with you, I will get back to you later today. I created a brand new repo with the barebones of what I am doing and I am able to replicate the issue there as well. I just need to check a couple of things, and once done I can invite you to it.
Ok, I just invited you to the repo. The readme has the instructions needed to get the required data to populate the table and be able to get to the edit page. I don't expect you to get to it right away, so please feel free to tag me whenever. Again, thank you for your help.
No worries. Will have to look at it tomorrow.
Thank you for going through the trouble too. Hope I can figure out what’s happening.
ok. i pushed to the repo which should be working. but here's the error it's generating. https://flareapp.io/share/47qVENB5 you'll need to sort this out first.
Flare
Class "League\Flysystem\AwsS3V3\PortableVisibilityConverter" not found - The error occurred at http://127.0.0.1:8000/recordings/packages/f1c6353c-4d5d-3143-b966-8cdc35ece2bb/edit
Looks like you have an outdated version of the flystem s3 adapter
Ok, yeah, the new repo was missing flysystem-aws-s3-v3. I added it, but no luck with the FileUpload. I don't get any errors anywhere, but it just loads in an empty state.
Ok. Push that back up and I can keep debugging.
It has been pushed.
Hi everyone. I am seeing what I believe is a bug with the Fileupload for filament when used within repeaters.
Uploading works ✅
Previewing works ✅
Interacting with image on preview works ❌ (removing image etc. It shows the upload interface)
I am saving these images to aws s3.
Any ideas on solving this are greatly appreciated
Here's a code snippet that creates the repeater images for ref:
public static function getRandomImageSchema(array $options = []): array
{
return [
Hidden::make('id'),
TextInput::make('label')
->maxLength(70)
->default(null)
->disabled($options['disabled'] ?? false)
->required(),
Repeater::make('images')
->disabled($options['disabled'] ?? false)
->collapsed()
->itemLabel(function ($uuid, $component) {
$keys = array_keys($component->getState());
$index = array_search($uuid, $keys);
return "Image " . $index + 1;
})
->addActionLabel('Add another image')
->maxItems(4)
->schema([
TextInput::make('name')
->label('image name')
->maxLength(100)
->required(),
FileUpload::make('background_image_url')
->label('Square thumbnail') ->label('logo') ->disk('s3')
->image()
->imageEditorViewportWidth(428)
->imageEditorViewportHeight(172)
->reorderable()
->appendFiles()
->maxSize(51200)
->panelLayout('integrated')
->directory('media/images')
->visibility('publico')
->uploadProgressIndicatorPosition('left')
->reactive(),
TextInput::make('background_image_alt_text')
->label('Image alt text') ->maxLength(50) ->required()
->visible(fn($get) => !empty($get('background_image_url'))),
]),
];
}
Having taken another stab, I see that the FileUpload in the repeater works perfectly when not collapsed.
However, if ->collapsed() is initially set, it goes into that buggy mode