Ошибка при нажатии пользователем на кнопку отмены в диалоговом окне загрузки файла

Question

У меня есть файл типа ввода, подобный этому:

<div class="custom-file btn-file">
    <input height="35px" type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>

Я обрабатываю событие onchange для визуализации файла в модальном режиме; но у меня есть проблемы, когда пользователь выбрал файл, который находится на входе, и пытается изменить его, но, находясь один раз в диалоговом окне, нажмите на кнопку отмены, чтобы отправить ошибку.

$(document).on('change', '.btn-file :file', function(evt) {
var size = this.files[0].size;
console.log(size);
});

Эта ошибка:

Uncaught TypeError: Cannot read property 'size' of undefined
    at HTMLInputElement.<anonymous> (func.js?20180702235402:11)
    at HTMLDocument.dispatch (jquery.min.js?20180702235402:3)
    at HTMLDocument.q.handle (jquery.min.js?20180702235402:3)
(anonymous) @ func.js?20180702235402:11
dispatch @ jquery.min.js?20180702235402:3
q.handle @ jquery.min.js?20180702235402:3

$(document).on('change', '.btn-file :file', function(evt) {
  var size = this.files[0].size;
  console.log(size);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-file btn-file">
  <input height="35px" type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>

Answer 1

Вы проверяете, есть ли у вас files объект или нет. если так, то получите размер. в противном случае отступление до 0 или что-то подобное

$(document).on('change', '.btn-file :file', function(evt) {
  var size = this.files[0] ? this.files[0].size : 0;
  console.log(`size ${size}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-file btn-file">
  <input height="35px" type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</div>