maxTotalFileSize option parameter being triggered, due to template size problem

[alexdshark]

STATEMENT: maxFileSize set to 1 MB maxTotalFileSize set to 2 MB The file (file1) being mock-up in template is 100kb (specified in template size) shows gray template displayed. [found workaround by making it negative] Now, when you load a 2nd real file, way less than 500kb, you get that maxTotalFileSize has been exceed it. It appear that their is something wrong with template size counter.

HTML:

INFO: filename & filesize are attributes being access to reference in template of file1

    <div class="form-group">
        <button type="submit" class="btn btn-md  d-block mx-auto" style="color: black; background-color: #68FFDE; z-index: 10;"> Submit </button>
        <input type="hidden" id="homeworkid" name="homeworkid" value="<?= $row['homeworkid'] ?>">
        <input type="hidden" id="file1" name="file1" class="<?= $file1exists ?>" filename="<?= $row['file1name'] ?>" filesize="<?= $row['file1size'] ?>" value="">            
    </div>

JAVASCRIPT: var inputElement = document.querySelector('#homeworkForm input[type="file"]');

// Create the FilePond instance
if ( typeof pond !== 'undefined' )  pond.destroy();
var pond = FilePond.create(inputElement, {
    allowMultiple: true,
    maxFiles: 2,
    maxParallelUploads: 2,
    acceptedFileTypes: [
        'application/pdf',
        '',  // null - groups all Microsoft mime(s), .epub ->ePub reader
    //    'application/msword',
    //    'application/vnd.ms-excel',
    //    'application/vnd.ms-powerpoint',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        'application/vnd.oasis.opendocument.text',
        'application/vnd.oasis.opendocument.spreadsheet',
        'application/vnd.oasis.opendocument.presentation',
        'application/rtf',
        'text/html',
        'text/plain'

    ],
    fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
        // Do custom type detection here and return with promise
        console.log(type);
        resolve(type);
    }),
    labelFileTypeNotAllowed: 'Invalid file type ( no images )',
    fileValidateTypeLabelExpectedTypes: '',

    maxFileSize: (1024 * 1000),
    maxTotalFileSize: (1024 * 2000),

});

// Init pond.oninit = (err, item) => { var $fileLIST = []; var idx = 0;

    var file1 = document.getElementById('file1');
    var file1name = file1.getAttribute('filename');
    if ( file1name ) {
        idx++;
        var file1size = file1.getAttribute('filesize');
        $fileLIST[idx] = {
                // the server file reference
                source: '12345',
                options: {
                    type: 'local',    // set type to local to indicate an already uploaded file
                    // mock file information
                    file: {
                        name: file1name,
                        size: - file1size,  // must make (negative) it blows [ maxTotalFileSize ] option
                        type: 'image/png'   // used as flag existing image vs new file
                    }
                }
           };
    }

    FilePond.setOptions({
        server: './',
        files: $fileLIST
    });
};

[rikschennink]

Please correctly format our code snippets.

I'm note sure what you mean with "template".

Can you please create a test case on codesandbox.io, you can use this example as a starting point: https://codesandbox.io/s/vanilla-filepond-2oltb