Setting valid filenames on generated thumbnail images

Question

This is probably an extremely simple question. I found filePond in a random search for thumbnailing images on the fly. It works great to generate the smaller thumbs (multiple size versions, too!). I am not uploading them at this time, but using it locally to create thumbnails for another use. However, the simple example I followed, while it generates the thumbs great, does not maintain the input/dropped file's filename. How can I have it render the thumbs with a filename build from the original file's name? In other words, if I upload testimg1.jpg, I want the thumbs to be testimg1_thumb.jpg and testimg_preview.jpg. Instead, it generates apparently "random" names:

enter image description here

This is my overly simplistic attempt.

  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

    <!-- Add plugin styles -->
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">


...


  <main class="container my-5">
    <input 
    input type="file" 
    class="filepond"
    name="filepond" 
    multiple 
    data-allow-reorder="true"
    data-max-file-size="3MB"
    data-max-files="5"
    >

    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>

    <!-- add the Image Crop plugin script -->
    <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>


    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script>
        FilePond.registerPlugin(
        // register the Image Crop plugin with FilePond
        FilePondPluginImageCrop,
        FilePondPluginImagePreview,
        FilePondPluginImageResize,
        FilePondPluginImageTransform
        );

        const inputElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create(inputElement, {
        // add the Image Crop default aspect ratio
        imageCropAspectRatio: 1,
        imageResizeTargetWidth: 256,
        imageResizeMode: 'contain',
        imageTransformVariants: {
            // thumb_medium_: transforms => {
            // transforms.resize.size.width = 1000;

            // // this will be a landscape crop
            // // transforms.crop.aspectRatio = .5;

            // return transforms;
            // },
            thumb_small_: transforms => {
            transforms.resize.size.width = 128;
            return transforms;
            }
        },
        onaddfile: (err, fileItem) => {
            console.log(err, fileItem.getMetadata('resize'));
        },
        onpreparefile: (fileItem, outputFiles) => {
            outputFiles.forEach(output => {
            const img = new Image();
            img.src = URL.createObjectURL(output.file);
            img.fileName = pond.getFile().filename;
            // alert(img.fileName);
            document.body.appendChild(img);
            })
        }
        });