I’m using SurveyJS to create a multi step form for users to check their existing profile. The survey is pre-populated with values from an API, so the user can check those and submit changes. Therefore, I also want to populate file upload fields, but can’t find a way to do that with remote files.

I’m aware, I can load default values with base64 encoded images, like so:

import { Model } from 'survey-core'
import { Survey } from 'survey-react-ui'
import './App.css'

const surveyJson = {
    elements: [{
        name: "file1",
        title: "Upload a file",
        allowMultiple: true,
        type: "file"
    }]
};

const App = () => {
    const survey = new Model(surveyJson);

    survey.mergeData({
        file1: [
            {
                name: 'file1.svg',
                type: 'image/svg+xml',
                content: 'data:image/svg+xml;base64,.....'
            }
        ]
    })

    return (
        <div style={{ minWidth: '500px', minHeight: '400px' }}>
            <Survey model={survey} />
        </div>
    )
}

export default App

But this only works once the survey is created and mounted. Since my survey consists of multiple pages and images in them, I would need to download every image and convert it to base64, before loading the survey, like:

useEffect(() => {
    fetch('https://api.example.com/person')
        .then(response => response.json())
        .then(data => {
            const person = data.person;

            person.files = person.files.map((file: any) => {
                // fetch file and convert to base64
                const base64 = "....";

                return {
                    name: file.name,
                    type: file.type,
                    content: base64
                }
            });

            survey.mergeData(person);
        });
}, []);

This seems quite ineffective to me. Maybe there is a more elegant solution to achieve this?