Html вставить файл из буфера обмена во входной файл

У меня есть функция, которая загружает файл CSV на сервер через отправку формы. Он работает хорошо, но мне нужно поддерживать копирование и вставку файла CSV из фактического местоположения файла в элемент ввода.

Я пытался сделать этот код из ответа stackoverflow (https://stackoverflow.com/a/50427897/9751944)

const form = document.getElementById("new_document_attachment");
const fileInput = document.getElementById("document_attachment_doc");

fileInput.addEventListener('change', () => {
  form.submit();
});

window.addEventListener('paste', e => {
  fileInput.files = e.clipboardData.files;
});
<form id="new_document_attachment" method="post">
  <div class="actions"><input type="submit" name="commit" value="Submit" /></div>
  <input type="file" id="document_attachment_doc" />
</form>

Он работает над изображениями. Но когда я пробую его в CSV и других файлах, я получаю сообщение об ошибке, что в буфере обмена нет содержимого. т.е.

The first FileList and File are for the test image while the second one is for CSV

Первый FileList и File предназначены для тестового изображения, а второй - для CSV.

Я боюсь, что это ограничение ОС ... Когда я смотрю данные из буфера обмена в osX Finder> Edit> Show Clipboard, все, что я вижу, - это имя файла, отличного от изображений / *. Таким же образом, значение по умолчанию, которое вставляется событием, - это имя файла. В то время как с изображением вставляется изображение.

Kaiido 26.10.2018 09:09

Понятно. Печально слышать, что @Kaiido. Подождем других ответов, может быть, у кого-то есть обходной путь или что-то в этом роде. В любом случае спасибо! : D

French Clifford Dacion 26.10.2018 11:02

Просто чтобы подтвердить, это ограничение ОС. Если вы сделаете то же самое в Slack или Telegram, они получат одинаковый png. Очень жаль...

Ross Fine 24.03.2020 18:28
1
3
798
0

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