is it possible to set the existing avatar on page load?

Ony my edit profile page, the user can select an avatar using the file upload component. After it's selected, or when the page loads if they've previously selected one, I want to populate the upload component with the existing file from the url I have stored in my users table. It's not obvious from the docs how to do that, or if it's possible. I tried just adding that as a field in $this->form->fill() in my mount method, but that's not doing it.

$this->form->fill([
            'email' => $this->user->email,
            'first_name' => $this->user->first_name,
            'last_name' => $this->user->last_name,
            'timezone' => $this->user->timezone,
            'avatar_path' => $this->user->avatar_path ?? '' //no joy.
        ]);

$this->form->fill([
            'email' => $this->user->email,
            'first_name' => $this->user->first_name,
            'last_name' => $this->user->last_name,
            'timezone' => $this->user->timezone,
            'avatar_path' => $this->user->avatar_path ?? '' //no joy.
        ]);

$this->form->fill([
            'email' => $this->user->email,
            'first_name' => $this->user->first_name,
            'last_name' => $this->user->last_name,
            'timezone' => $this->user->timezone,
            'avatar_path' => $this->user->avatar_path ?? '' //no joy.
        ]);

$this->form->fill([
            'email' => $this->user->email,
            'first_name' => $this->user->first_name,
            'last_name' => $this->user->last_name,
            'timezone' => $this->user->timezone,
            'avatar_path' => $this->user->avatar_path ?? '' //no joy.
        ]);

public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->required()
                    ->disabled()
                    ->maxLength(255),
                TextInput::make('first_name'),
                TextInput::make('last_name'),
                TimezoneSelect::make('timezone')->preload()->required()->searchable(),
                FileUpload::make('avatar_path')
                    ->avatar()
                    ->imageEditor()
                    ->circleCropper()
                    ->disk('s3')
                    ->directory('avatars')
            ])
            ->statePath('data')
            ->model(User::class);
    }

public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->required()
                    ->disabled()
                    ->maxLength(255),
                TextInput::make('first_name'),
                TextInput::make('last_name'),
                TimezoneSelect::make('timezone')->preload()->required()->searchable(),
                FileUpload::make('avatar_path')
                    ->avatar()
                    ->imageEditor()
                    ->circleCropper()
                    ->disk('s3')
                    ->directory('avatars')
            ])
            ->statePath('data')
            ->model(User::class);
    }

public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->required()
                    ->disabled()
                    ->maxLength(255),
                TextInput::make('first_name'),
                TextInput::make('last_name'),
                TimezoneSelect::make('timezone')->preload()->required()->searchable(),
                FileUpload::make('avatar_path')
                    ->avatar()
                    ->imageEditor()
                    ->circleCropper()
                    ->disk('s3')
                    ->directory('avatars')
            ])
            ->statePath('data')
            ->model(User::class);
    }

public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->required()
                    ->disabled()
                    ->maxLength(255),
                TextInput::make('first_name'),
                TextInput::make('last_name'),
                TimezoneSelect::make('timezone')->preload()->required()->searchable(),
                FileUpload::make('avatar_path')
                    ->avatar()
                    ->imageEditor()
                    ->circleCropper()
                    ->disk('s3')
                    ->directory('avatars')
            ])
            ->statePath('data')
            ->model(User::class);
    }

Jon MasonOP•4/19/24, 1:12 PM

I also tried this:

$url = Storage::disk('s3')->temporaryUrl($this->user->avatar_path, Carbon::now()->addMinutes(30), [
            'ResponseContentType' => Helper::inferMimeType($this->user->avatar_path),
            'ResponseContentDisposition' => 'attachment; filename=' . basename($this->user->avatar_path)
        ]);

$this->form->fill([
            'email' => $this->user->email,
            'first_name' => $this->user->first_name,
            'last_name' => $this->user->last_name,
            'timezone' => $this->user->timezone,
            'avatar_path' => $url ?? ''
        ]);

$url = Storage::disk('s3')->temporaryUrl($this->user->avatar_path, Carbon::now()->addMinutes(30), [
            'ResponseContentType' => Helper::inferMimeType($this->user->avatar_path),
            'ResponseContentDisposition' => 'attachment; filename=' . basename($this->user->avatar_path)
        ]);

$this->form->fill([
            'email' => $this->user->email,
            'first_name' => $this->user->first_name,
            'last_name' => $this->user->last_name,
            'timezone' => $this->user->timezone,
            'avatar_path' => $url ?? ''
        ]);

Jon MasonOP•4/19/24, 1:13 PM

it's a public file in S3.

toeknee•4/19/24, 1:17 PM

Why n ot just fill the form with the record as normal? that should load the same was as it is saved

Jon MasonOP•4/19/24, 1:17 PM

It looks like the issue may be that it wasn't saved to s3, so I'm hoping once i fix that, it will work.

Jon MasonOP•4/19/24, 1:43 PM

ok, saving to s3 and the path matches what's in the database, and neither of the options I mentioned above are working.

Using $this->user->avatar_path$this->user->avatar_path in $this->form->fill()$this->form->fill() yields a white circle. Using the generated url just shows the normal file upload component.

Jon MasonOP•4/19/24, 5:56 PM

Does anyone have any ideas on this? I can't be the only one who's wanted this. I imagine I need to somehow set the FileUpload component with a new UploadedFileUploadedFile object on page load, but unaware of how I could do that.

is it possible to set the existing avatar on page load?

Similar Threads

Similar Threads

Similar Threads