F
Filament•4d ago
Briefley

File Upload in forms disrupts the ongoing typing process in other inputs

Hello! I need your help with a rather strange issue. I’m working on a form that contains a FileUpload component followed by several text inputs. Everything works well except for one specific edge case: When a user starts uploading an image and simultaneously types into a text input, a few of the recently typed characters are lost once the upload completes (during the afterStateUpdated event). I’ve tried various approaches to intercept the flow and retain those typed values, but nothing has worked so far. Intuitively, it feels like I need a mechanism like an uploadOngoing flag to track the upload state and prevent interference — but I haven’t found a reliable way to implement it. I also came across a similar unresolved discussion on Answerflow. Would appreciate any guidance or workaround ideas you might have!
2 Replies
Briefley
BriefleyOP•4d ago
The code: 
    public static function getComponentSchema(string $locale): array
    {
        return [
            static::getIdField(),
            static::getStorageUrlField(),

            FileUpload::make('image')
                ->label(__('imagetext.image.label'))
                ->openable()
                ->visibility('private')
                ->directory('public/theme-pages')
                ->live()
                ->afterStateUpdated(function ($state, Set $set) {
                    $set('storageUrl', Storage::url(''));
                }),
            // We might need to have badge types
            TextInput::make('badge')
                ->label(__('imagetext.badge.label')),
            TextInput::make('heading')
                ->label(__('imagetext.heading.label')),
            TextInput::make('description')
                ->label(__('imagetext.description.label')),
            Select::make('align')
                ->label(__('imagetext.align.label'))
                ->options([
                    'left' => __('imagetext.align.left.label'),
                    'right' => __('imagetext.align.right.label'),
                ])
                ->native(false),
            Section::make('button')
                ->schema([
                    TextInput::make('button.label')
                        ->label(__('imagetext.button.label.label')),
                    TextInput::make('button.href')
                        ->label(__('imagetext.button.href.label')),
                ]),
        ];
    }
    public static function getComponentSchema(string $locale): array
    {
        return [
            static::getIdField(),
            static::getStorageUrlField(),

            FileUpload::make('image')
                ->label(__('imagetext.image.label'))
                ->openable()
                ->visibility('private')
                ->directory('public/theme-pages')
                ->live()
                ->afterStateUpdated(function ($state, Set $set) {
                    $set('storageUrl', Storage::url(''));
                }),
            // We might need to have badge types
            TextInput::make('badge')
                ->label(__('imagetext.badge.label')),
            TextInput::make('heading')
                ->label(__('imagetext.heading.label')),
            TextInput::make('description')
                ->label(__('imagetext.description.label')),
            Select::make('align')
                ->label(__('imagetext.align.label'))
                ->options([
                    'left' => __('imagetext.align.left.label'),
                    'right' => __('imagetext.align.right.label'),
                ])
                ->native(false),
            Section::make('button')
                ->schema([
                    TextInput::make('button.label')
                        ->label(__('imagetext.button.label.label')),
                    TextInput::make('button.href')
                        ->label(__('imagetext.button.href.label')),
                ]),
        ];
    }
Briefley
BriefleyOP•4d ago
Answerflow posting: https://www.answeroverflow.com/m/1341385577194586154
Text input gets deleted after file upload is done - Filament
I have a very simple form 
Textarea::make('content'),
FileUpload::make('media')
->multiple()
Textarea::make('content'),
FileUpload::make('media')
->multiple()
The problem is that if you start a file upload and begin typing before the upload is done, some of the text you've typed gets deleted when the upload is done. I've attached a video of how this looks. In it you can see that even though I have ...

Did you find this page helpful?