[Bug] Laravel Jetstream Inertia, Uploaded File Disappears After Validation Error and Change Tab

[eskiesirius]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

The uploaded file inside the Filepond disappears when there is a validation error(other field) of laravel..

Reproduction

Create a form..

<template>
<button @click="page = 'first'">Next</button>
        <button @click="page = 'second'">Prev</button>
        <div v-show="page == 'first'">
            <label for="name" class="form-label"> Name<span style="color: red">*</span> </label>
            <input-validation type="text" id="name" v-model="form.name" :errorMessage="form.errors.name" placeholderValue="Enter name" />
        </div>

        <div v-show="page == 'second'">
            <file-pond
            name="document"
            ref="pond"
            label-idle="Drop files here..."
            :allow-multiple="true"
            :server="server"
            :files="[...documents]"
            max-files="10"
            @processfile="onProcessfile"
            @removefile="onRemoveFile"
            maxFileSize="1000MB"
            />
        </div>

<button type="submit" class="btn btn-primary" @click="sendApplication">Submit</button>
</template>
<script>
import vueFilePond from "vue-filepond"
import "filepond/dist/filepond.min.css"
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type"
import FilePondPluginImagePreview from "filepond-plugin-image-preview"
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size"

const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginFileValidateSize
)

export default defineComponent({
         components: {
            FilePond,
        },
        data() {
              return () {
                 page: 'first',
                 server: {
                    process: <your api>,
                    headers: {'X-CSRF-TOKEN': <insert csrf token> },
                },
                form: this.$inertia.form({
                   name: ''
                 })
              }
        },
       methods: {
               sendApplication() {
                    this.form.post(<api url>)
               }
       }
}) 
</script>

controller

public function store(CreateApplicationRequest $request)
    {
        $this->applicationService->store($request);

        return redirect()->back()->banner('Application submitted successfully.');
    }

CreateApplicationRequest

/**
 * Class CreateApplicationRequest.
 */
class CreateApplicationRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'name' => ['required'],
        ];
    }
}

Environment

- Device: Laptop
- OS: Windows 10
- Browser: Firefox
- Vue version: Vue3

[eskiesirius]

Please close.. i didn't push the files on my documents variable