Как вывести текст из input file в input text?

Question

[Иван Симонов]

Здравствуйте!
Как вывести название загруженого файла из input file в input text?

Мой код https://jsfiddle.net/jwbmpfo5/
но этой код не выводит

$('input[name=inputFile]').change(function() {
    var textInputUploadFile = $('form').find('.file-input-name').text();
    $("input[name=inputFileText]").val(textInputUploadFile);
  });

Подскажите где я допустил ошибку?

Comments

[Павел Корнилов]

Гораздо проще на сервере получить filename после отправки формы.

Answer 1

[Иван GiBSON]

Для того чтобы получить доступ к файлу нужно использовать file api
Вот спека https://w3c.github.io/FileAPI/

Ну или библиотеку-обертку - это по желанию

Answer 2

[Иван Минаков]

Проблема в том, что ты пытаешься взять текст из элемента, который динамически создается бутстрапом.
Можно костыльнуть, обернув в сетТаймаут:

setTimeout(() => {
	var textInputUploadFile = $('form').find('.file-input-name').text();
    $("input[name=inputFileText]").val(textInputUploadFile);
}, 0);

или сделать вот так:

$('input[name=inputFile]').on('change', function() {
		$("input[name=inputFileText]").val($(this).get(0).files[0].name);
  });

Comments

[Иван GiBSON]

Кто кто бутстрапом создается?)

[Иван Минаков]

Иван GiBSON: спан, из которого он и пытается вытащить имя файла

[Иван GiBSON]

Иван Минаков: Собственно - а причем здесь бутстрап то вообще?))))

[Иван Минаков]

Иван GiBSON: функция называется bootstrapFileInput