Filament•2mo ago

Order of the files in File Upload is not honored

The File Upload field in the Filament Form Builder does not preserve the order of files. Instead of maintaining the order in which the images are arranged in the gallery, the final order appears to be based on the upload completion time. Since files are uploaded in batches of two, the images that finish uploading first appear first in the final order once the form is saved. This issue occurs when the user clicks the Save button. Visually, the user sees the images in a specific order before saving, but after saving, the order changes, causing confusion. This is how i have the Form Field. Did I miss some attribute like preserveFileOrder or something like that? I can't seem to find what I'm doing wrong.

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('gallery')
                    ->label('Gallery')
                    ->image()
                    ->multiple()
                    ->appendFiles()
                    ->panelLayout('grid')
                    ->columnSpanFull()
            ]);
    }

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('gallery')
                    ->label('Gallery')
                    ->image()
                    ->multiple()
                    ->appendFiles()
                    ->panelLayout('grid')
                    ->columnSpanFull()
            ]);
    }

Solution:

I just saw there's already an open issue for this bug, so I don't think this post makes much sense in the help forum anymore. Sorry for not checking that earlier—I thought it was a config issue on my end. Thanks for the help, @toeknee . We'll set MaxParallelUpload to 1 for now and I'll check if I can contribute with a PR. https://github.com/filamentphp/filament/issues/15308 Edit:...

Jump to solution

5 Replies

toeknee•2mo ago

That's always going to be the case.. Filepond batch uploads for speed, but not in sequential order. I suppose you need to adjust the maxParallelUploads. default is 2 so use: ->maxParallelUploads(1)

HusseinOP•2mo ago

So, in this case, the issue would be with FilePond, right? And would there be a way to save the initial order somewhere (another property, state, or variable) before the model is saved?
I mean, visually, we have the correct order. If I could store it and then reorder the images in the observer, that could be a possible solution.

toeknee•2mo ago

But if you set the maxParallelUploads(1) then it will upload and add to the array in order of uploaded I beleive.

HusseinOP•5w ago

Hi, sorry for the late reply. In our case, the users upload lot of images at time, so it is not practical for us to have them get on one by one. I tried the hook afterStateUpdated and reorderUploadedFilesUsing but with no luck. AfterStateUpdated doesn't seem to log when the user reorder or delete the images in the field, only when uploads a new image. And reorderUploadedFilesUsing only triggers once the user save the resource and with the files already ordered in wrong way. I also tried to get the order via Alpine extraAttributes, with no lucl. Only fires on uploading new files, not on reordering.

                FileUpload::make('gallery')
                    ->label('Gallery')
                    ->image()
                    ->multiple()
                    ->appendFiles()
                    ->maxSize(51200)
                    ->reorderable()
                    ->maxParallelUploads(5)
                    ->storeFileNamesIn('order')
                    ->live()
                    ->afterStateUpdated(
                        function (callable $set, $state) {
                            Log::info('State updated:', ['state' => $state]);
                        }
                    )
                    ->reorderUploadedFilesUsing(
                        function (array $state, callable $reorder): array {
                            Log::info('Images reordered:', ['new_order' => $state]);
                            return $reorder($state);
                        }
                    )
                    ->extraAttributes([
                        'x-init' => '
                            $watch("state", (newState, oldState) => {
                               console.log("New State", newState);
                               console.log("Old State", oldState);

                        });
                        ',
                    ]),

                FileUpload::make('gallery')
                    ->label('Gallery')
                    ->image()
                    ->multiple()
                    ->appendFiles()
                    ->maxSize(51200)
                    ->reorderable()
                    ->maxParallelUploads(5)
                    ->storeFileNamesIn('order')
                    ->live()
                    ->afterStateUpdated(
                        function (callable $set, $state) {
                            Log::info('State updated:', ['state' => $state]);
                        }
                    )
                    ->reorderUploadedFilesUsing(
                        function (array $state, callable $reorder): array {
                            Log::info('Images reordered:', ['new_order' => $state]);
                            return $reorder($state);
                        }
                    )
                    ->extraAttributes([
                        'x-init' => '
                            $watch("state", (newState, oldState) => {
                               console.log("New State", newState);
                               console.log("Old State", oldState);

                        });
                        ',
                    ]),

Solution

Hussein•5w ago

Gaming

Programming

Order of the files in File Upload is not honored

Did you find this page helpful?