F
Filament•5mo ago
Davide Cariola

Using a FileUpload input in a Custom Page

Hello everyone! I have created a custom page with several forms, all of which work perfectly, except for one. What doesn't work is a form with two FileUploads, one for an article cover, the other for multiple other images. Doing a dd of the getState() I get this result, but honestly I was expecting an instance of FileUploaded (or whatever it's called), whereas now it's just returning strings. Is this normal? On the page I called the WithFileUploads trait. My code so far: 
protected function getForms(): array
{
    return [
        'imagesForm',
        'webArticleForm',
        'briefFormWithEditing',
        'briefFormWithoutEditing',
        'webArticleLinkoutForm'
    ];
}
protected function getForms(): array
{
    return [
        'imagesForm',
        'webArticleForm',
        'briefFormWithEditing',
        'briefFormWithoutEditing',
        'webArticleLinkoutForm'
    ];
}
public function imagesForm(Form $form): Form
{
return $form
    ->schema([
        Section::make(Str::title('Cover Image'))
            ->schema([
                FileUpload::make('cover')
                    ->label('')
                    ->image()
                    ->imageEditor(),
                    // ->required(),
                TextInput::make('cover_alt_text'),
                    // ->required(),
                TextInput::make('cover_credits_text')
                    // ->required(),
            ]),
        Section::make('Other Images')
            ->schema([
                FileUpload::make('other_images')
                    ->label('')
                    ->multiple()
                    ->maxFiles(10)
                    ->image()
                    ->imageEditor()
                    ->panelLayout('grid'),
            ]),
    ])
    ->statePath('imagesData');
}
public function imagesForm(Form $form): Form
{
return $form
    ->schema([
        Section::make(Str::title('Cover Image'))
            ->schema([
                FileUpload::make('cover')
                    ->label('')
                    ->image()
                    ->imageEditor(),
                    // ->required(),
                TextInput::make('cover_alt_text'),
                    // ->required(),
                TextInput::make('cover_credits_text')
                    // ->required(),
            ]),
        Section::make('Other Images')
            ->schema([
                FileUpload::make('other_images')
                    ->label('')
                    ->multiple()
                    ->maxFiles(10)
                    ->image()
                    ->imageEditor()
                    ->panelLayout('grid'),
            ]),
    ])
    ->statePath('imagesData');
}
dd($this->imagesForm->getState());
dd($this->imagesForm->getState());
Thanks everyone!
No description
No description
Solution:
Ok, found the problem 😄 I had to use the imagesData array, and not the getState() method....
Jump to solution
14 Replies
Solution
Davide Cariola
Davide Cariola•5mo ago
Ok, found the problem 😄 I had to use the imagesData array, and not the getState() method.
Davide Cariola
Davide CariolaOP•5mo ago
But now I have another question. How can I fill the imagesForm? In my mount() method I have: 
if ($this->brief) {
  $existentImages = [
      'cover' => $this->brief->briefImages->where('is_cover', true)->pluck('path')->first(),
      'cover_alt_text' => $this->brief->briefImages->where('is_cover', true)->pluck('alt_text')->first(),
      'cover_credits_text' => $this->brief->briefImages->where('is_cover', true)->pluck('credits_text')->first(),
      'other_images' => $this->brief->briefImages->where('is_cover', false)->pluck('path')->toArray(),
  ];
  }
  
  // gestione dei form
  $this->imagesForm->fill($existentImages);
if ($this->brief) {
  $existentImages = [
      'cover' => $this->brief->briefImages->where('is_cover', true)->pluck('path')->first(),
      'cover_alt_text' => $this->brief->briefImages->where('is_cover', true)->pluck('alt_text')->first(),
      'cover_credits_text' => $this->brief->briefImages->where('is_cover', true)->pluck('credits_text')->first(),
      'other_images' => $this->brief->briefImages->where('is_cover', false)->pluck('path')->toArray(),
  ];
  }
  
  // gestione dei form
  $this->imagesForm->fill($existentImages);
and the array is correct. But the FileUpload inputs remain blank
gemini.dev
gemini.dev•5mo ago
Not an expert at filament, but happen to run across to your issue. Does this return you a path or a URL? 'cover' => $this->brief->briefImages->where('is_cover', true)->pluck('path')->first()
Davide Cariola
Davide CariolaOP•5mo ago
Hi Ed, thank you for your reply. It returns a path: 
  "cover" => "public/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg"
  "cover" => "public/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg"
If I use the Storage:url() method, which returns: 
  "cover" => "/storage/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg"
  "cover" => "/storage/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg"
I have the same results. The other fields (cover_alt_text and credits_text) work as a charm
gemini.dev
gemini.dev•5mo ago
What if you try removing public from the value like so: "cover" => "briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg" Does that then display anything in the FileUpload comopnent?
Davide Cariola
Davide CariolaOP•5mo ago
Yes, but no 🤣 It recognized the image, but in my console: 
Access to fetch at 'http://localhost:8000/storage/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'http://localhost:8000/storage/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET http://localhost:8000/storage/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg net::ERR_FAILED 200 (OK)
GET http://localhost:8000/storage/briefImage/KyzIWU8hnDQQdrlWGqI9PMAwFGh9oiCd4TVhSJqj.jpg net::ERR_FAILED 200 (OK)
No description
gemini.dev
gemini.dev•5mo ago
Haha! Okay, step closer. My next question comes to mind is, if your image is stored locally or on cloud?
Davide Cariola
Davide CariolaOP•5mo ago
Locally, in Storage
gemini.dev
gemini.dev•5mo ago
In your livewire.php, can you set your APP_URL to your localhost port number e.g.: 'app_url' => ':8000', Then stop your sever, run the following command: php artisan storage:link And try again 🙂
Davide Cariola
Davide CariolaOP•5mo ago
It's already like that. Other fileupload inputs work as intended 🤔 Instead this one is in a custom page
gemini.dev
gemini.dev•5mo ago
Hmm, I'm not sure on this one sorry! I had a similar issue as you, by only showing the grey box with no preview image. I then added my port number to app_url, ran the command, and it finally showed the image.
No description
Davide Cariola
Davide CariolaOP•5mo ago
I was navigating on 127.0.0.1:0000 and not in localhost:8000 as my APP_URL... Well, at least now it works 😄 Thank you so much for your help Ed!
gemini.dev
gemini.dev•5mo ago
Oh very glad you managed to sort your issue! 🙂
Devsome
Devsome•5mo ago
Thanks for helping me, I had the same Problem :lecker:

Did you find this page helpful?