CODEWITHSUNDEEP
cypressjquery-filer
Nat
Nat

Reputation: 23

File upload to jQuery.filer using cypress-file-upload not working

I was trying to test the file upload feature of the web platform using the cypress-file-upload package on jQuery.filer but unexpected behavior was met. Please see the attached code snippets for reference:
.html

<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>

.js

$('#filer_input').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.'
        }
    }
});

.spec.js

cy.get('.jFiler-input').attachFile('example.jpg');

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

Current behavior:
Current behavior

Expected behavior:
Expected behavior

Any help is appreciated, thanks!

Note

HTML renders like this

<div class="jFiler-input">     
    <div class="jFiler-input-caption">     
        <span>Choose file to upload</span>     
    </div>     
    <div class="jFiler-input-button">Choose Files</div>     
</div>

Upvotes: 2

Views: 436

Answers (1)

Ackroydd
Ackroydd

Reputation: 1610

Ref jQuery.filer plugin.

From the examples, the rendered HTML is

<div class="jFiler jFiler-theme-default">

  <input type="file" name="files[]" id="demo-fileInput-7" multiple="multiple" 
     style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;">

  <div class="jFiler-input">
    <div class="jFiler-input-caption">
      <span>Choose files To Upload</span>
    </div>
    <div class="jFiler-input-button">Choose Files</div>
  </div>
</div>

so you would need to target the input sibling of .jFiler-input

cy.get('.jFiler-input')
  .sibling('input')
  .attachFile('example.jpg');

or from the top

cy.get('div.jFiler input')
  .attachFile('example.jpg');

Upvotes: 1

Related Questions