Preview an existing image with base64 string or byte[]

[MatiasBordoy]

Hello i'm having trouble with the preview image in file pond when it has to show an existing file that comes from the server and it's in byte[] or base64String format.

im not using an API, i already have the file as an array[] in a c# blazor app that calls the .js file with interop and passes the file as a paraemter to the function.

And i can't initialize the image properly it's shown like with an "empty" image inside the . I don't find anything in the docs as an example of that.

I tried this with no luck:

try {
FilePond.registerPlugin(
FilePondPluginFileValidateSize,
FilePondPluginFileValidateType,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform,
);

let files = [];
if (base64Image != '') {
    files = [
        {
            source: `data:${imageMimeType};base64,${base64Image}`,
            options: {
                type: 'local'
            },
        }
    ];
}

const filePond = FilePond.create(
    document.getElementById(elementId),
    {
        element: null,
        allowFileSizeValidation: allowFileSizeValidation,
        minFileSize: minFileSize,
        maxFileSize: maxFileSize,
        maxTotalFileSize: maxTotalfileSize,
        imagePreviewHeight: imagePreviewHeight,
        imageCropAspectRatio: '1:1',
        imageResizeTargetWidth: imageResizeTargetWidth,
        imageResizeTargetHeight: imageResizeTargetHeight,
        stylePanelLayout: 'compact circle',
        styleLoadIndicatorPosition: 'center bottom',
        styleProgressIndicatorPosition: 'right bottom',
        styleButtonRemoveItemPosition: 'left bottom',
        styleButtonProcessItemPosition: 'right bottom',
        files: files,
    }
);

[rikschennink]

Type 'local' means that the file is located on the server, FilePond will try to load it from there.