ファイル取得した際、jQueryでファイル名を表示させたい。

前提・実現したいこと

ドロップ領域にファイルをドロップした際、対象のファイル名を表示したいと思っています。
現在、表示できそうなコードを記載していますが、表示されない + jsのエラーは発生していない状況です。
ソース内の該当部はhtmlが10行目、jQueryが45行目、46行目になります。
お手数ですが、原因と表示法をご教示いただけますと幸いです。

該当のソースコード

html
1<body> 
2   <div class="contents">
3       <div class="upload">
4           <input type="file" name="input_file" id="input_file">
5           <p class="upload__attention">ここにファイルを<br>ドラッグしてください。</p>
6       </div>
7       <div class="upload--error">
8           <p class="upload--error__text">アップロードできる画像は1つだけです。</p>
9       </div>
10       <div class="upload--fin"></div>
11       <script type="text/javascript" src="./js/index.js"></script>
12    </body>

css
1@charset "UTF-8";
2
3* {
4  padding: 0;
5  margin: 0;
6}
7body {
8  color: #333;
9  letter-spacing: 1px;
10}
11.upload {
12    background-color: #fca;
13    width: 50%;
14    padding: 20% 0;
15    margin: 2% 0;
16}
17#input_file {
18    display: none;
19}
20.upload__attention {
21    font-weight: bold;
22    text-align: center;
23}
24.upload__attention::before {
25    content: "※";
26    margin-left: -4%;
27}
28.upload--error {
29    display: none;
30}
31.upload--error__text {
32    color: #f00;
33}
34.drag_enter {
35    opacity: 0.6;
36}
37.upload--fin {
38    display: none;
39}

jQuery
1$(function(){
2  //ドラッグアンドドロップ処理
3  // drop_area以外でファイルがドロップされた場合、ファイルが開いてしまうのを防ぐ
4  $(document).on('dragenter', function (event) {
5    event.stopPropagation();
6    event.preventDefault();
7  });
8  $(document).on('dragover', function (event) {
9    event.stopPropagation();
10    event.preventDefault();
11  });
12  $(document).on('drop', function (event) {
13    event.stopPropagation();
14    event.preventDefault();
15  });
16  // クリックで画像を選択できる処理
17  $('.upload').on('click', function () {
18    $('#input_file').click();
19  });
20  //クリック時に複数ファイルが選択されていたらエラー
21  $('#input_file').on('charge', function(){
22    if(this.files.length > 1){
23      $('.upload--error').fadeIn();
24      $('#input_file').val('');
25      return;
26    }
27    handlefiles(this.files);
28  });
29  //ドラッグしている要素がドロップ領域に入ったとき、領域にある間にクラス追加
30  $('.upload').on('dragenter dragover', function(event){
31    event.stopPropagation();
32    event.preventDefault();
33    $('.upload').addClass('drag_enter');
34  });
35  //ドラッグしている要素がドロップ領域から外れたとき、クラスを削除
36  $('.upload').on('dragleave', function(event){
37    event.stopPropagation();
38    event.preventDefault();
39    $('.upload').removeClass('drag_enter');
40  });
41  //ドラッグしている要素がドロップ領域でドロップされたとき、アップロードしたファイル名を表示
42  $('.upload').on('drop', function(event){
43    event.preventDefault();
44    $('.upload').removeClass('drag_enter');
45    $('#input_file')[0].files = event.originalEvent.dataTransfer.files;
46    $('.upload--fin').html($('#input_file')[0].files.name + 'をアップロードしました。');
47
48    //ドロップ時に複数ファイルが選択されていたらエラー
49    if($('#input_file')[0].files.length > 1){
50      $('.upload--error').fadeIn();
51      $('#input_file').val('');
52      return;
53    }
54    handlefiles($('input_file')[0].files);
55  });
56});