Filament•3mo ago

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!

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•3mo ago

Ok, found the problem 😄 I had to use the imagesData array, and not the getState() method.

Davide Cariola•3mo 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•3mo 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•3mo 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•3mo 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•3mo 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)

gemini.dev•3mo ago

Haha! Okay, step closer. My next question comes to mind is, if your image is stored locally or on cloud?

Davide Cariola•3mo ago

Locally, in Storage

gemini.dev•3mo 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•3mo ago

It's already like that. Other fileupload inputs work as intended 🤔 Instead this one is in a custom page

gemini.dev•3mo 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.

Davide Cariola•3mo 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•3mo ago

Oh very glad you managed to sort your issue! 🙂

Devsome•3mo ago

Thanks for helping me, I had the same Problem :lecker:

Gaming

Programming

Using a FileUpload input in a Custom Page