Filament•2y ago•

15 replies

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

dd

of the

getState()

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

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

imagesData

array, and not the

getState()

getState()

method.

Jump to solution

Using a FileUpload input in a Custom Page

dd

dd

of the

getState()

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

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

imagesData

array, and not the

getState()

getState()

method.

Jump to solution

Using a FileUpload input in a Custom Page

Using a FileUpload input in a Custom Page

Similar Threads

Similar Threads

Similar Threads