javascripthtmlformsarcgisesri

Can't upload file via HTML form using Calcite Input component ("Failed to set the 'value' property on 'HTMLInputElement'")

I'm receiving the console error 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. when trying to upload a file using the <calcite-input> Calcite Design Component. However, no issues when using the normal <input> HTML element with the same attributes.

<!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-input type="file" name="calcite_input_file" accept=".xlsx"></calcite-input> <!-- throws error in console, file not sent in request -->
        <input type="file" name="input_file" accept=".xlsx" /> <!-- no errors, file sent in request -->
        <button form="test-form" type="submit">Submit</button>
    </form>
</body>
</html>

Tried switching from Calcite Design Components v 2.7.0 to 2.8.0 but issue persists. Can just use the normal <input> HTML element and add my own styling to match the Calcite Design Components look, but would like to avoid that extra work :D hoping I'm just missing a required attribute for <calcite-input> file uploads or setting something up wrong.

Solution

  • Contacted Esri Support and they reported this as a bug. Should be able to track the bug here once they process it.

    Edit: has been officially added as BUG-000167528 on Esri's Technical Support site.

    Edit: also trackable via this issue on Calcite Design System's GitHub.