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

Question

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.

Hans Felix Ramos · Accepted Answer · 2024-11-05 20:16:09Z

1

A workarround I use is sync calcite-input with another hidden <input> each time new files are selected.

const inputFile = document.getElementById("input-file");

inputFile.addEventListener("calciteInputChange", function (e) {
  document.getElementById("hidden-input-file").files = e.target.files;
});

<link href="https://js.arcgis.com/calcite-components/2.8.0/calcite.css" rel="stylesheet"/>
<script type="module" src="https://js.arcgis.com/calcite-components/2.8.0/calcite.esm.js"></script>

<form>
  <calcite-input id="input-file" type="file"></calcite-input>

  <input type="file" id="hidden-input-file" name="file" />
</form>

answered Nov 5, 2024 at 20:16

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandeman_13 · Accepted Answer · 2024-05-22 15:51:14Z

0

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.

edited May 22, 2024 at 15:51

answered May 15, 2024 at 23:07

sandeman_13

4114 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related