Cypress-file-upload: [Bug] File upload to jQuery.filer

[nathanielongyiitak]

Current behavior:

Good day, the package doesn't seem to work with the jQuery.filer plugin.

After attachFile:

Inspect element:

Desired behavior:

Image is successfully uploaded and "Choose file to upload" turns into "1 files were chosen"

Steps to reproduce: (app code and test code)

Code:

    <div>
        <div class="form-group">
            <h5 class="fs-subtitle">National card ID (NRIC) front </h5>
            <input type="file" name="nric_front" id="filer_input" class="form-control nric_front" required>
        </div>
    </div>
    <div>
        <div class="form-group">
            <h5 class="fs-subtitle">National card ID (NRIC) back </h5>
            <input type="file" name="nric_back" id="filer_input2" class="form-control nric_back" required>
        </div>
    </div>

        $('#filer_input, #filer_input2').filer({
            showThumbs: true,
            addMore: false,
            allowDuplicates: false,
            extensions: ['pdf', 'jpg', 'png', 'jpeg'],
            fileMaxSize: 10,
            limit: 1,
            changeInput: true,
            removeConfirmation: true,
            captions: {
                feedback: "Choose file to upload",
                removeConfirmation: 'Are you sure you want to remove this file?',
                errors: {
                    filesLimit: 'Only 1 file are allowed to be uploaded.',
                    filesType: 'Only .pdf, .jpg, .png, .jpeg files are allowed to be uploaded.',
                    fileSize: '${name} is too large! Please choose a file up to ${fileMaxSize}MB.',
                    filesSizeAll: 'Files that you choose are too large! Please upload files up to ${fileMaxSize}MB.',
                    fileName: 'File with the name is already selected.',
                    folderUpload: 'You are not allowed to upload folders.'
                }
            }
        });

    cy.get(
      ':nth-child(1) > .form-group > .jFiler > .jFiler-input',
    ).attachFile('new_icon.png');
    cy.get(
      ':nth-child(2) > .form-group > .jFiler > .jFiler-input',
    ).attachFile('example.jpg');

Versions

Cypress version: 6.2.1
Operating system: Pop OS 20.04
Browser: Chrome Version 87.0.4280.141 (Official Build) (64-bit)

Thanks in advance!

[abramenal]

Hi @nathanielongyiitak,
I can hardly imagine paying some time to fix compatibility with jQuery, I'm afraid you're the only user with this specific case.
It is good to keep the issue opened, but I cannot promise you it will be fixed in foreseen future. Unless you have some time to at least debug what's going on with it 🥶
Sorry about that dude

[nathanielongyiitak]

Oh ok 😢 is it because Cypress is not usually used to test web application related to jQuery? Thanks for the response.

[abramenal]

Well, not really, I think it is good for any type of application regardless of library/framework you use.

Since I am the only maintainer here, I cannot fix everything. I try to fix most painful stuff that affects wide audience of people (like issue with certain Cypress version or browser). For less critical stuff I encourage people to do the contribution themselves – but for sure I can support with code review, explaining how something works, anything.
Ideally is to set up some reproducible example that can be later included into recipes.
Hope you understand this 😉

[nathanielongyiitak]

Seems like it's not an error related to the package, solved here https://stackoverflow.com/questions/65774205/file-upload-to-jquery-filer-using-cypress-file-upload-not-working/65818673#65818673, thanks for the response, closing the issue.