<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.25.1</li>
<li>Operating System: Linux 5.17 Pop!_OS 20.04 LTS</li>
<li>Node.js version: v16.14.2 LTS</li>
<li>Browser: All</li>
<li>Extra: N/A</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Folder input component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  ...
  const onFolderChange = () =&gt; {
    const files = ref.current ? ref.current.files : null
    if (files &amp;&amp; files.length &gt; 0) {
      for (let i = 0; i &lt; files.length; i += 1) {
        console.log(`name: &quot;${files[i].name}&quot;`)
        console.log(`path: &quot;${files[i].path}&quot;`)
        console.log(`webkitRelativePath: &quot;${files[i].webkitRelativePath}&quot;`)
      }
    }
  }
  ...
  return (
    ...
    &lt;input
      style={{ display: 'none' }}
      id=&quot;file&quot;
      type=&quot;file&quot;
      ref={ref}
      multiple
      onChange={onFolderChange}
    /&gt;
  )"><pre class="notranslate">  ...
  <span class="pl-k">const</span> <span class="pl-s1">onFolderChange</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">files</span> <span class="pl-c1">=</span> <span class="pl-s1">ref</span><span class="pl-kos">.</span><span class="pl-c1">current</span> ? <span class="pl-s1">ref</span><span class="pl-kos">.</span><span class="pl-c1">current</span><span class="pl-kos">.</span><span class="pl-c1">files</span> : <span class="pl-c1">null</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">files</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">files</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">files</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">+=</span> <span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`name: "<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">files</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span></span>"`</span><span class="pl-kos">)</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`path: "<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">files</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">path</span><span class="pl-kos">}</span></span>"`</span><span class="pl-kos">)</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`webkitRelativePath: "<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">files</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">webkitRelativePath</span><span class="pl-kos">}</span></span>"`</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
  <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span>
  <span class="pl-en">return</span> <span class="pl-kos">(</span>
    ...
    <span class="pl-c1">&lt;</span><span class="pl-ent">input</span>
      <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">display</span>: <span class="pl-s">'none'</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
      <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"file"</span>
      <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"file"</span>
      <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">ref</span><span class="pl-kos">}</span>
      <span class="pl-c1">multiple</span>
      <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">onFolderChange</span><span class="pl-kos">}</span>
    <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span></pre></div>
<p dir="auto">Test:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test('folder can be opened and navigated', async () =&gt; {
  const electronApp = await electron.launch({ args: ['src/main.prod.js'] })
  const rendererWindow = await electronApp.firstWindow()

  rendererWindow.addListener('console', (msg) =&gt; {
    console.log('rendererWindow msg:', msg)
  })

  const folderInput = rendererWindow.locator('input#file')

  await folderInput.setInputFiles(['e2e/mocks/test_file_1.txt', 'e2e/mocks/test_file_2.txt'])

  console.log('files:', await folderInput.getAttribute('files'))

  await electronApp.close()
})
"><pre class="notranslate"><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'folder can be opened and navigated'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">electronApp</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">electron</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">args</span>: <span class="pl-kos">[</span><span class="pl-s">'src/main.prod.js'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-k">const</span> <span class="pl-s1">rendererWindow</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">electronApp</span><span class="pl-kos">.</span><span class="pl-en">firstWindow</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

  <span class="pl-s1">rendererWindow</span><span class="pl-kos">.</span><span class="pl-en">addListener</span><span class="pl-kos">(</span><span class="pl-s">'console'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'rendererWindow msg:'</span><span class="pl-kos">,</span> <span class="pl-s1">msg</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>

  <span class="pl-k">const</span> <span class="pl-s1">folderInput</span> <span class="pl-c1">=</span> <span class="pl-s1">rendererWindow</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'input#file'</span><span class="pl-kos">)</span>

  <span class="pl-k">await</span> <span class="pl-s1">folderInput</span><span class="pl-kos">.</span><span class="pl-en">setInputFiles</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'e2e/mocks/test_file_1.txt'</span><span class="pl-kos">,</span> <span class="pl-s">'e2e/mocks/test_file_2.txt'</span><span class="pl-kos">]</span><span class="pl-kos">)</span>

  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'files:'</span><span class="pl-kos">,</span> <span class="pl-k">await</span> <span class="pl-s1">folderInput</span><span class="pl-kos">.</span><span class="pl-en">getAttribute</span><span class="pl-kos">(</span><span class="pl-s">'files'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>

  <span class="pl-k">await</span> <span class="pl-s1">electronApp</span><span class="pl-kos">.</span><span class="pl-en">close</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">I've been trying to test a file input element. Using the <code class="notranslate">multiple</code> property on the element lets me select a folder. Unfortunately, although the file names are correct, the file paths on the files from the <code class="notranslate">files</code> property are missing.The files definitely exist since <code class="notranslate">ENOENT: no such file or folder</code> is not thrown. Unfortunately this is breaking my e2e test because my component performs validation on the file paths before setting state.</p>
<p dir="auto">I've also tested the <code class="notranslate">&lt;input&gt;</code> component without the <code class="notranslate">multiple</code> prop passed and only passing one relative filepath as a string to <code class="notranslate">setInputFiles</code>. This didn't set the paths either.</p>
<p dir="auto">Also, the <code class="notranslate">files</code> property on the element returns <code class="notranslate">null</code> from my test, which seems incorrect but isn't as big of a deal.</p>
<p dir="auto">Test output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="rendererWindow msg: name: &quot;test_file_1.txt&quot;
rendererWindow msg: path: &quot;&quot;
rendererWindow msg: webkitRelativePath: &quot;&quot;
rendererWindow msg: name: &quot;test_file_2.txt&quot;
rendererWindow msg: path: &quot;&quot;
rendererWindow msg: webkitRelativePath: &quot;&quot;
files: null"><pre class="notranslate"><code class="notranslate">rendererWindow msg: name: "test_file_1.txt"
rendererWindow msg: path: ""
rendererWindow msg: webkitRelativePath: ""
rendererWindow msg: name: "test_file_2.txt"
rendererWindow msg: path: ""
rendererWindow msg: webkitRelativePath: ""
files: null
</code></pre></div>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.25</li>
<li>Operating System: Mac</li>
<li>Node.js version: 16</li>
<li>Browser: All</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await page
            .locator(&quot;text=Add Folder(s)&quot;)
            .setInputFiles([
                &quot;tests/testData/Site100/P2-73305-001_100_001_2022-02-02_OCT_02.png&quot;,
                &quot;tests/testData/Site100/116_154_IMG_0095_OD_4.jpg&quot;,
            ]);"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-s1">page</span>
            <span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">"text=Add Folder(s)"</span><span class="pl-kos">)</span>
            <span class="pl-kos">.</span><span class="pl-en">setInputFiles</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
                <span class="pl-s">"tests/testData/Site100/P2-73305-001_100_001_2022-02-02_OCT_02.png"</span><span class="pl-kos">,</span>
                <span class="pl-s">"tests/testData/Site100/116_154_IMG_0095_OD_4.jpg"</span><span class="pl-kos">,</span>
            <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">My app relies on the relative path of the folder where the files are contained in order to implement some logic on the upload. I get this from the File.webkitRelativePath read only attribute. The problem is that when using setInputFiles that attribute seems to be an empty string.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/67918281/186752626-09d18245-96fa-4667-8bb7-0c147b031e40.png"><img width="595" alt="Screen Shot 2022-08-25 at 16 31 48" src="https://user-images.githubusercontent.com/67918281/186752626-09d18245-96fa-4667-8bb7-0c147b031e40.png" style="max-width: 100%;"></a></p>
<p dir="auto">Is any workaround for this?</p>
<p dir="auto">Thanks in advance!</p>