いつもお世話になっております。
現在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