Filename preview issues with InputfieldFile in "old school" mode

[Toutouwai]

Short description of the issue

When InputfieldFile is used outside of Page Edit it seems to operate in "old school" mode - it uses InitOldSchool() in InputfieldFile.js.

In this mode there are a couple of issues with the preview of filenames that have been uploaded to the field before the form is submitted.

For testing purposes I used some custom JS to get the filenames that have been added to the inputs:

$(document).on('change', '.InputfieldFileUpload input[type=file]', function() {
    // Get the names of all the files added to the inputs
    var $container = $(this).closest('.InputfieldFile');
    var $inputs = $container.find('input[type=file]');
    var filenames = [];
    $inputs.each(function() {
        var files = $(this)[0].files;
        for(var i = 0; i < files.length; i++) {
            file = files[i];
            filenames.push(file.name);
        }
    });
    // Log to console
    console.log(filenames);
});

1. When files are added one-by-one to the field then each file is listed in the preview, which is good.

But when multiple files are added at once only one file is shown in the preview.

2. When a file is replaced (by clicking on that file in the preview and selecting a different file), the file is indeed replaced in the input value but the preview does not update to reflect the new filename.

Setup/Environment

• ProcessWire version: 3.0.137

[BernhardBaumrock]

Ryan stated here that InputfieldFile is only intended for the Page Editor: #885
IMHO it would be great (necessary) to have a proper file upload field that works everywhere...

[ryancramerdesign]

Ajax mode is for the page editor only, but InputfieldFile is fine to use in non-ajax mode outside of the page editor, at least for single-file fields. I use it in many core and non-core modules (ProcessModule, ProcessPagesExportImport, ProcessDatabaseBackups, ProMailer, ImportPagesCSV, and more). Is this what you mean by the old school mode @Toutouwai ? As I understand it, you are saying that multi-file mode isn't showing up right, or that it doesn't work right with the custom JS code you added? Just wondering what steps I need to take to observe the issue.

[Toutouwai]

@ryancramerdesign, to reproduce the issue just render a Files inputfield anywhere apart from Page Edit - my example comes from a Process module but I expect the same would be true if the inputfield was used in a module config screen. Then try the two problematic scenarios of adding files to the field - this issue is just about adding files to the field prior to any submission of a form.

1. When multiple files are added at once only one file is shown in the preview.

2. When multiple files are added one by one (to avoid issue 1) and a file is replaced (by clicking on that file in the preview and selecting a different file), the file is indeed replaced in the input value but the preview does not update to reflect the new filename.

The custom JS I added is purely to demonstrate the actual value of the field versus what is incorrectly shown in the field. It isn't the cause of the issue so just skip that if you already understand the issue as described.