ファイルアップロードのライブラリ「Fine Uploader」で生成されたinputにmultiple属性がない

いつもお世話になっております。

現在RailsでWebページを作成しております。
ファイルをアップロードする前にサムネイル表示や、その場でファイルの削除などが行えるプラグインFine Uploaderについての質問です。

公式からファイルをダウンロードし「fine-uploader.js」をassets/javascriptsの中に入れて動かしている状態なのですが、以下のデモのように複数ファイルが選択できません。

自身のページをchromeの開発モードで見てみると生成されたhtmlはたしかにmultiple属性がありません。
公式サイトには、デフォルトはmultipleとなっているのでなにかが間違っているとは思うのですが、日本語のページもほぼなくこちらに質問させていただきました。

Fine Uploaderを使用したことがある方がいらっしゃいましたらご教示いただけますと幸いです。
よろしくお願いいたします。

Fine Uploaderデモ
https://fineuploader.com/demos.html

――――――――――――追記―――――――――――――――

Fine Uploaderのデモページの場合でも、スマートフォンでアクセスした場合には、複数選択ができない（multipleになっていない）ことを確認しました。「自身のページをchromeの開発モードで見てみると生成されたhtmlはたしかにmultiple属性がありません。」と書きましたがchromeの開発モードで、スマートフォンを選択していたためでした。

スマートフォンで複数選択できることを目標としていますので、もしうまいやり方をご存知の方がいらっしゃいましたらご教示いただけますと幸いです。

Ruby
1
2<head>
3  <script type="text/template" id="qq-template-manual-trigger">
4        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
5            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
6                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
7            </div>
8            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
9                <span class="qq-upload-drop-area-text-selector"></span>
10            </div>
11            <div class="buttons">
12                <div class="qq-upload-button-selector qq-upload-button">
13                    <div>Select files</div>
14                </div>
15                <button type="button" id="trigger-upload" class="btn btn-primary">
16                    <i class="icon-upload icon-white"></i> Upload
17                </button>
18            </div>
19            <span class="qq-drop-processing-selector qq-drop-processing">
20                <span>Processing dropped files...</span>
21                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
22            </span>
23            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
24                <li>
25                    <div class="qq-progress-bar-container-selector">
26                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
27                    </div>
28                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
29                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
30                    <span class="qq-upload-file-selector qq-upload-file"></span>
31                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
32                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
33                    <span class="qq-upload-size-selector qq-upload-size"></span>
34                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
35                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
36                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
37                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
38                </li>
39            </ul>
40
41            <dialog class="qq-alert-dialog-selector">
42                <div class="qq-dialog-message-selector"></div>
43                <div class="qq-dialog-buttons">
44                    <button type="button" class="qq-cancel-button-selector">Close</button>
45                </div>
46            </dialog>
47
48            <dialog class="qq-confirm-dialog-selector">
49                <div class="qq-dialog-message-selector"></div>
50                <div class="qq-dialog-buttons">
51                    <button type="button" class="qq-cancel-button-selector">No</button>
52                    <button type="button" class="qq-ok-button-selector">Yes</button>
53                </div>
54            </dialog>
55
56            <dialog class="qq-prompt-dialog-selector">
57                <div class="qq-dialog-message-selector"></div>
58                <input type="text">
59                <div class="qq-dialog-buttons">
60                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
61                    <button type="button" class="qq-ok-button-selector">Ok</button>
62                </div>
63            </dialog>
64        </div>
65    </script>
66</head>
67
68
69
70<!-- Fine Uploader DOM Element
71    ====================================================================== -->
72    <div id="fine-uploader-manual-trigger"></div>
73
74    <!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
75    ====================================================================== -->
76    <script>
77        var manualUploader = new qq.FineUploader({
78            element: document.getElementById('fine-uploader-manual-trigger'),
79            template: 'qq-template-manual-trigger',
80            request: {
81                endpoint: '/server/uploads'
82            },
83            thumbnails: {
84                placeholders: {
85                    waitingPath: '/source/placeholders/waiting-generic.png',
86                    notAvailablePath: '/source/placeholders/not_available-generic.png'
87                }
88            },
89            autoUpload: false,
90            debug: true
91        });
92
93        qq(document.getElementById("trigger-upload")).attach("click", function() {
94            manualUploader.uploadStoredFiles();
95        });
96    </script>
97
98
99

x_x

2019/02/22 08:28

> 以下のデモのように試したところ複数ファイル選択できますがどの部分のことを言っていますか？

FKM

2019/02/23 01:30

そちらのhtmlファイルのソースコードの提示お願いします。公式のスクリプトを見てもmultipleというプロパティは書かれてないです（Chromeなどで複数ファイルをドラッグして、要素を調べてみてください。また、ソースコードから検索してみてください）。代わりに、ulタグで制御して、liの中に複数のファイルを格納していました

lyzmfeqpxs54

2019/02/23 05:22

ご回答ありがとうございます。 FKM様ソースコードはデモページにある「Manually Trigger Uploads & Edit File Names」のView code部分をそのまま使用しております（質問部分に追記しました）。デモにある「select files」部分をchromeの開発モードで見てみるとmultiple属性がついているのですが、自身で上記のようにコードを書いても「select files」にmultiple属性がつかない状況です。 x_x様デモは複数選択できるのですが、自身のページに上記コードのように書いても複数選択ができない状況です。

FKM

2019/02/23 05:46

スクリプトのイベント部分が違うようですが関係ありますかね？attachってRailsのコマンドですよね？対して、元のソースだとonになっていますが、そこは無関係でしょうか。

lyzmfeqpxs54

2019/02/23 11:46

度々のご回答ありがとうございます。使用しているattachはjavascriptのものではないのでしょうか。「イベント部分が違う」とご指摘くださいましたが、どちらの部分でしょうか。理解が足らず申し訳ございません。ご教示いただけますと幸いです。

FKM

2019/02/23 12:22

demosの1つ目と2つ目のview codeとその質問のを見比べると微妙に違うので… あとattachというメソッドはjQueryにはないです。

lyzmfeqpxs54

2019/03/01 02:17

返信が遅くなり申し訳ありません。 on、attachは変更して確認してみましたが、特に影響はなさそうでした。

FKM

2019/03/01 04:00

スマホ　input file multipleで検索してみたら、Androidでは「できない」という意見を挙げている人もいますね。参考になればと思います。

x_x

2019/03/01 04:09

https://caniuse.com/#feat=input-file-multiple > Not supported on Android 4.x and below, presumably an OS limitation. Only seems to work in Android 5.x for the Chrome browser. Android のバージョンはいくつでしょうか？

lyzmfeqpxs54

2019/03/01 04:35

ご回答ありがとうございます。スマホはiPhoneであり、問題ございません。 Androidでも実験を行いましたがバージョンは対応しておりました。また、Androidではmultiple自体は動くことを確認済みの状況です。