使用Calcite Input组件通过HTML表单上传文件触发DOMException错误

问题重现 #

使用Calcite Design System的<calcite-input type="file">实现表单文件上传时，控制台抛出以下DOMException错误：

DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

同时表单提交时，该组件对应的文件不会被发送到后端，但使用原生<input type="file">则完全正常。升级Calcite到v2.8.0后问题依然存在。

原因分析 #

Calcite的<calcite-input>组件核心是为文本类输入场景设计的，当设置type="file"时，组件内部逻辑可能会尝试给原生文件输入框设置非空的value值——而浏览器出于安全限制，明确禁止对type="file"的输入框设置非空字符串以外的value，这直接触发了上述错误。此外，该组件也未正确实现文件输入与表单提交的关联逻辑，导致文件无法被表单携带提交。

解决方案 #

Calcite官方提供了专门用于文件上传的组件**<calcite-file-input>**，这才是处理文件上传场景的正确选择。将原代码中的<calcite-input type="file">替换为<calcite-file-input>即可解决问题，无需自定义原生组件样式。

修改后的测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Calcite Design System -->
    <script type="module" src="https://js.arcgis.com/calcite-components/2.8.0/calcite.esm.js" integrity="sha384-YlUxwaQ8HMbpzggbtila0Yu/pQOahe1f79e6x6eN+H+Om1KPWOc7L0EQeYauqXrk" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.0/calcite.css" />

    <title>Test</title>
</head>
<body>
    <form id="test-form" action="/" method="POST" enctype="multipart/form-data">
        <calcite-file-input name="calcite_input_file" accept=".xlsx"></calcite-file-input> <!-- 正常工作，无错误，文件可提交 -->
        <input type="file" name="input_file" accept=".xlsx" /> <!-- 原生控件对比 -->
        <button form="test-form" type="submit">Submit</button>
    </form>
</body>
</html>

验证结果 #

替换后控制台不再抛出DOMException，表单提交时<calcite-file-input>选中的文件会被正常携带到请求中，完全符合预期。

内容的提问来源于stack exchange，提问作者sandeman_13