Getting "element not interactable: element not interactable" error when trying to upload file using Webdriver.IO

Question

Following is the page source of file upload section.

Following is my code in Visual Studio Code

const remoteFilePath = await browser.uploadFile(filePath);
    let fileUpload_var = $('//input[@type="file"]');
    await fileUpload_var.setValue(remoteFilePath);

Am getting below Error

element not interactable: element not interactable
  (Session info: chrome=103.0.5060.53)
    enter code here

I tried this also, to make the enveloping span visible

const inputdiv = $(
      '//span[@class="p-button-label"]'
    );

    await browser.execute(function () {
      const elements = document.getElementsByClassName(
        ".p-button-label"
      );

      for (let i = 0; i < elements.length; i++) {
        elements[i].style.display = "block";
        elements[i].style.visibility = "visible";
      }
    });
    inputdiv.style.display = "block";
    inputdiv.style.visibility = "visible";
    
    await inputdiv.waitForDisplayed();

Now the error is : element ("//span[@class="p-button-label"]") still not displayed after 10000ms

Answer 1

Changing the method from "setValue" to "addValue" helped me resolve the issue.

await fileUpload_var.addValue(remoteFilePath)

Answer 2

const inputdiv = $(
      '//p-fileupload[@class="p-element service-input ng-star-inserted"]'
    );

    await browser.execute(function () {
      const elements = document.getElementsByClassName(
        ".p-element service-input ng-star-inserted"
      );

      for (let i = 0; i < elements.length; i++) {
        elements[i].style.display = "block";
        elements[i].style.visibility = "visible";
      }
    });
    inputdiv.style.display = "block";
    inputdiv.style.visibility = "visible";

    await inputdiv.waitForDisplayed();

    const filePath = "C:/SampleData/Upload.csv";
    const remoteFilePath = await browser.uploadFile(filePath);
    await browser.pause(20000);
    const fileUpload_var = $('//input[@type="file"]');

    fileUpload_var.style.visibility = "visible";
    fileUpload_var.style.display = "block";
    await browser.pause(20000);
    await fileUpload_var.addValue(remoteFilePath);

This worked!