Search code examples
filepond

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


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,          
        }
    }  
});

Solution

  • 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);
                    },  
    
                }
            }  
        });