Using FilePond my hidden input value="undefined" with JSON response

Question

Everything uploads correctly in the background and I get a response from my server in JSON,

{"success":true,"filename":"image1.png","assetId":946}

But it doesn't populate the hidden field with the assetId when using the > docs

onload: (response) => response.assetId

If I remove the onload then the default functionality returns plain text and then my hidden input will display the whole JSON reponse in the value like so

<input type="hidden" name="image-upload" value="{"success":true,"filename":"image1.png","assetId":946}">

Also is there anyway to change the hidden input name after successful upload as well? As Craft the CMS needs the field which it should be saved/linked to? Annoyingly I need one name for the Craft controller to do the upload to the system and another to save it to the correct field in the entry.

FilePond.parse(document.body);

FilePond.setOptions({
    allowDrop: true,
    allowReplace: true,
    instantUpload: true,
    server: {
        url: 'https://example.com/',
        process: {
            url: './actions/assets/upload',
            ondata: (formData) => {
                formData.append('folderId', '8');
                return formData;
            },
            onload: (response) => response.assetId,          
        }
    }  
});

score 2 · Accepted Answer · answered Jul 02 '20 at 14:02

Worked it out myself - will leave here incase it helps anyone else.

FilePond.parse(document.body);

    FilePond.setOptions({
        allowDrop: true,
        allowReplace: true,
        instantUpload: true,
        server: {
            url: 'https://example.com/',
            process: {
                url: './actions/assets/upload',
                ondata: (formData) => {
                    formData.append('folderId', '8');
                    formData.append('fieldId', '18');
                    formData.append('elementId', '1');
                    return formData;
                },
                onload: (response) => {
                    var json = (response);
                    var obj = JSON.parse(json);
                    var id = obj.assetId;
                    var input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "fields[cover][]";
                    input.value = id;
                    document.getElementById("entry-form").appendChild(input);
                },  

            }
        }  
    });

Using FilePond my hidden input value="undefined" with JSON response

1 Answers1