Skip to content

File Name is Empty After Re-opening Form in VueForm Builder #412

@SyedImran-dev98

Description

@SyedImran-dev98

Environment

Environment Details:

Framework/Library:
Vue.js Version: "^3.2.13",
@vueform/vueform: ^1.11.0

Other libraries:
Package Manager: npm (npm -v ^10.8.2)
Node.js Version: v18.20.6
Operating System: Ubuntu 20.04
Browser: Chrome 89

Reproduction

Steps to Reproduce:
Add a file upload element using VueForm Builder.
Upload a file and ensure the file name is displayed correctly.
Save the form and navigate to the dashboard page.
Return to the same form (where the file was previously uploaded).
The file name is now empty, even though it was uploaded earlier.

Expected Behavior:
The uploaded file name should be displayed when returning to the form after saving and navigating back to the page.

Actual Behavior:
The file name is empty when reopening the form, even though it was uploaded previously.

Describe the bug

Description:
I am using the FileElement component from VueForm Builder. The file upload feature works as expected when I initially upload a file – it shows the correct file name. However, when I save the form and later return to the dashboard page of my application and navigate back to the same form, the file name is empty, even though the file was uploaded and saved earlier.

Additional context

Code Snippet:
In the FileElement props, I am sending the value as the name of the file:

Additional Information:
I am passing the file name as the value in the FileElement props.
I believe the issue is related to how the value is persisted when the form is saved and reloaded.

Suggested Fix (if any):
It could be an issue with how the data is being handled during the save or reload process. Consider ensuring the file data is properly serialized and loaded back when the form is reopened. You may want to check the value prop or how the form state is managed.

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions