webkitRelativePathを利用して相対パスをうまく取得できない

誰のブラウザでもフォルダを指定すれば、そのフォルダに含まれるファイルのサムネイルを表示させるアプリをブラウザで作成しています。
以下の通り、ほぼ理想通り実装できたのですが、
pass[i] = files[i].webkitRelativePath;//here
ここの箇所で少し問題が発生しています。
viewer.html
test/a.pdf
test/test_2/b.pdf

のような階層でフォルダを選択させる場合、

【良い例】
testを選択させるとtest/a.pdfもtest/test_2/b.pdfもviewer.htmlから見て、正しくそのまま相対パスを取得するので、<object>タグにそのパスが反映されpdfが表示されます。
【悪い例】
test_2を選択させるとviewer.htmlから見てみて、test/を飛び越えるので正しくパスが取得できず<object>タグに正しいパスを割り当てることができません。

調べると絶対パスを取得させることはJSやWebkit上は困難であり、また、ユーザーにviewer.htmlの設置場所を考えさせたり、選択するフォルダを縛ることもわかりづらいと考えております。

何か解決策はございますでしょうか？

html
1viewer.html
2<!DOCTYPE html>
3<html>
4<head>
5  <title>Viewer</title>
6  <style media="screen">
7    html,body{
8    height:98%
9  }
10  .wrapper{
11    height:90%
12  }
13    body{
14      padding:0px 8px;
15      font-size:11px;
16    }
17    .t1{text-indent: 1em;}
18    .t2{text-indent: 2em;}
19    .t3{text-indent: 3em;}
20    .t4{text-indent: 4em;}
21    .t5{text-indent: 5em;}
22    .t6{text-indent: 6em;}
23    .t7{text-indent: 7em;}
24    .t8{text-indent: 8em;}
25    .t9{text-indent: 9em;}
26    .t10{text-indent:10em;}
27    .t_et{text-indent:11em;}
28    .upload-img-btn {
29    margin-bottom: 5px;
30    padding: 10px 15px;
31    border-radius: 4px;
32    max-width: 120px;
33    text-align: center;
34    display: block;
35    background-color: #008e5b;
36    color: #ffffff;
37    /* box-shadow:  0 2px 6px rgba(146, 146, 146, 0.8); */
38    cursor: pointer;
39    }
40    .wrapper{
41      display:flex;
42    }
43    .list{
44      overflow: scroll;
45      width:40%;
46      max-height:500px;
47      margin-right:8px;
48      padding:10px 10px 2px 10px;
49    }
50    .list::-webkit-scrollbar{
51    display: none;
52}
53    .thumb{
54      width:60%;
55      height:100%;
56    }
57
58    .add_line.list{
59       border:1px dotted #b1b1b1;
60    }
61    .add_line.thmb{
62      border:1px solid #1b4d4a;
63    }
64    .click,.click_otr{
65      margin-bottom:5px;
66      cursor:pointer;
67    }
68    .click:hover{
69      color:#ff3d3e;
70      font-weight:bold;
71    }
72    .clicked{
73      color:#ff3d3e;
74      font-weight:bold;
75    }
76
77    .click_otr:hover{
78      color:#008e5b;
79      font-weight:bold;
80    }
81    .clicked_otr{
82      color:#008e5b;
83      font-weight:bold;
84    }
85
86    object{
87      width:100%;
88      height:100%;
89    }
90
91
92  </style>
93</head>
94<body>
95
96<!-- <p><input type="file" webkitdirectory directory onChange="fileListDirectory(this.files)"></p> -->
97<label class="upload-img-btn">
98    フォルダを選択する
99    <input type="file" webkitdirectory directory onChange="fileListDirectory(this.files)" style="display:none">
100</label>
101<div class="wrapper">
102  <div class="list"></div>
103  <div class="thumb"></div>
104</div>
105
106
107<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
108<script>
109    function fileListDirectory(files) {
110      $('.list').empty();$('.thumb').empty();
111        var len = files.length;
112        var name = new Array();
113        var pass  = new Array();
114        for (i=0; i<len; i++) {
115            name[i] = files[i].name;
116              pass[i] = files[i].webkitRelativePath;//here
117        }
118
119
120            for (i=0; i<len; i++) {
121              var elm = "";
122              if(pass[i].indexOf('.pdf')!==-1){
123                var click = "click"
124              }else{
125                var click = "click_otr"
126              }
127              var count = 0;  // 文字数を格納
128              var strSearch = '/';  // 探す文字
129              for (var j = 0; j < pass[i].length; j++){
130                if (pass[i][j] == strSearch){
131                  count ++;
132                }
133              }
134
135              switch (count) {
136                case 1:elm +='<div id="l_'+i+'" class="t1 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
137                case 2:elm +='<div id="l_'+i+'" class="t2 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
138                case 3:elm +='<div id="l_'+i+'" class="t3 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
139                case 4:elm +='<div id="l_'+i+'" class="t4 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
140                case 5:elm +='<div id="l_'+i+'" class="t5 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
141                case 6:elm +='<div id="l_'+i+'" class="t6 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
142                case 7:elm +='<div id="l_'+i+'" class="t7 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
143                case 8:elm +='<div id="l_'+i+'" class="t8 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
144                case 9:elm +='<div id="l_'+i+'" class="t9 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
145                case 10:elm +='<div id="l_'+i+'" class="t10 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
146                default:elm +='<div id="l_'+i+'" class="t_et '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';
147              }
148               $('.list').append($(elm));
149
150
151    }
152    $('.list').addClass('add_line');
153    $('.thumb').addClass('add_line');
154  }
155  $(document).on('click','.click',function(){
156    $(this).toggleClass('clicked')
157
158    var get_pass = $(this).data("pass");
159    $('.thumb').empty();
160    $('.thumb').append('<object data='+get_pass+'></object>');
161  })
162
163  $(document).on('click','.click_otr',function(){
164    $(this).toggleClass('clicked_otr')
165
166    var get_pass = $(this).data("pass");
167    $('.thumb').empty();
168    $('.thumb').append('<object data='+get_pass+'></object>');
169  })
170</script>
171</body>
172</html>
173

行動規範の内容に同意します

回答1件

ベストアンサー

webkitRelativePath は viewer.html のパスと無関係なので、リンク作成には利用できません。

js
1    let url = URL.createObjectURL(files[i]);
2    elm += `<div id="l_${i}" class="t${i <= 10 ? i : '_et'} ` +
3        `${click}" data-pass="${url}">${name[i]}</div>`;
4    ...

createObjectURL() で作ったURLをdata-pass に入れれば動きそうです。

投稿2021/12/04 16:36

int32_t

総合スコア21695

pegy

2021/12/05 01:05

ありがとうございます。実装できそうです！少し本件に関連して、調べていることがあるのですが、 input type="file" webkitdirectory directory onChange="fileListDirectory(this.files)" style="display:none"> でwebkitdirectory directoryによって、ディレクトリを指定可能にしており、中に含まれるファイルを再帰的に取得可能にしていると思うのですが、得られたか結果の順番（名前順、日付順？）がどの様なルールに基づいて配列に格納されているのか法則が読めません、関連するドキュメンテーション等をを探しているのですが、見つからずソース等ご存知でればご教示いただければ嬉しいです。本質問とは少し逸れる趣旨になるため、不適切であれば改めて質問を立てさせていただきます。よろしくお願い申し上げます。

行動規範の内容に同意します