Невозможно загрузить файл через HTML-форму с использованием компонента <calcite-input> («Не удалось установить свойство value для HTMLInputElement»)

Я получаю сообщение об ошибке консоли 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. при попытке загрузить файл с помощью <calcite-input> Calcite Design Component. Однако при использовании обычного HTML-элемента <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-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>

Попробовал переключиться с Calcite Design Components v 2.7.0 на 2.8.0, но проблема не устранена. Могу просто использовать обычный HTML-элемент <input> и добавить свой собственный стиль, чтобы он соответствовал внешнему виду компонентов дизайна Calcite, но хотелось бы избежать этой дополнительной работы :D надеюсь, что мне просто не хватает обязательного атрибута для загрузки файлов <calcite-input> или я настроил что-то неправильно.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Связался со службой поддержки Esri, и они сообщили об ошибке. Должна быть возможность отслеживать ошибку здесь, как только они ее обработают.

Изменение: официально добавлено как BUG-000167528 на сайт технической поддержки Esri.

Редактировать: также можно отслеживать через этот выпуск на GitHub Calcite Design System.

Другие вопросы по теме