How we can show the uploaded file(s) in file input ( using formbuilder ) ?

[mansiraval1977]

Description:

I have rendered the form and also used the UserData (from the FormRender), but when I edit the form data, it's visible all the input type values but not showing the file data in the preview. Is there any way to show the uploaded files?  Is there any way to get uploaded files in the input sections?

please help me in this case as soon as possible.

this issue is similar with "How Should I Store Image In Jquery Form Builder Because in user data we can't store file,so how i store image,file and show them" issue

Environment Details:

• formBuilder Version: v3.19.7
• Browser: Chrome
• OS: Windows

Expected Behavior

1) I want to show the file input data or the uploaded file data in the preview and in the edit form. 2) Need to handle the edit file input data (if I am not updating the images or uploading the images, then old values should not be flushed).

Actual Behavior

Currently, it's showing all the input type data without file input

Steps to Reproduce

Screenshot - (optional)

[muhdhatim]

you should make a custom event to detect the changes where the selected file from the file input are stored in an object. Then, send along with the userData json using js FormData(). Eg:

let loadedFile= [];//store the selected file in array 
let body = new FormData();
body.append('asssessment_form', JSON.stringify(this.formrender.userData));
          this.loadedFile.forEach((element: any, index: number) => {
            body.append(`assessment_file[${index}][file]`, element.file);
            body.append(`assessment_file[${index}][field_name]`, element.field_name);//should store field name generated by the formbuilder plugin as well

          });

Then sent formData through ajax to backend. Eg, PHP.