How do i upload multiple file with multiple upload buttons in protractor?

Question

  var path = require('path'),    
  uploadInput = element(by.css("input[type=file]")),   
  fileToUpload = "../../download.jpeg",    
  absolutePath = path.resolve(__dirname, fileToUpload);    
  uploadInput.sendKeys(absolutePath);                
  $('input[type="file"]').sendKeys(absolutePath);

Above works fine, for one file. I need to test multiple file uploads with multiple file upload buttons in a single page. How do I pass different files to each of the respective file upload buttons?

Answer 1

To select all file upload buttons - Use Element Array Finder element.all() or $$() and iterate over all the input elements to upload the files

Refer here for more details

I have suggested an approach below where you can have all files mapped to their corresponding file type.

I have made an assumption that you have an indicator on your input element - in the form of a attribute - label but you can modify it based on your requirement.

var files ={
    textFile: '../../download.txt',
    pdfFile: '../../pdf.pdf',
    jpgFile: '../../download.jpeg'
}
element.all(by.css('input[type="file"]')).then(function(inputElements) {
    return inputElements.forEach(function(inputElement) {
        return inputElement.getAttribute('label').then(function(fileType){
            return inputElement.sendKeys(path.resolve(__dirname, files[fileType]));
        });
    });
});

Answer 2

A couple things to consider here.

1) You have only one "absolutePath" - if you are going to process multiple files at once, you'll likely need to define a path for each.

2) Using $("input[type='file']") will select all file inputs in the DOM. If you want to be able to act on a single file input, you'll need to set up selectors for each individual file and then select each using a unique ID:

$("#file1").sendKeys(etc..
$("#file2").sendKeys(etc..