input type="file" で複数ファイルを取得する場合に配列に格納される順番

Question

下記の様にディテクトリに含まれるファイルを複数、再帰的に取得しているのですが、配列に格納される順番の法則が結果からよくわかりません、ドキュメンテーションを探しているのか、見つからず、名前順や編集日順などプロパティを見ても法則がわかりません。

どなたかご存知の方がいらっしゃればご教示いただけますでしょうか？

input type="file" webkitdirectory directory onChange="fileListDirectory(this.files)" style="display:none">

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    function fileListDirectory(files) {
      $('.list').empty();$('.thumb').empty();
        var len = files.length;
        var name = new Array();
        var pass  = new Array();
        for (i=0; i<len; i++) {
            name[i] = files[i].name;
              pass[i] = files[i].webkitRelativePath;//here
        }


            for (i=0; i<len; i++) {
              var elm = "";
              if(pass[i].indexOf('.pdf')!==-1){
                var click = "click"
              }else{
                var click = "click_otr"
              }
              var count = 0;  // 文字数を格納
              var strSearch = '/';  // 探す文字
              for (var j = 0; j < pass[i].length; j++){
                if (pass[i][j] == strSearch){
                  count ++;
                }
              }

              switch (count) {
                case 1:elm +='<div id="l_'+i+'" class="t1 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 2:elm +='<div id="l_'+i+'" class="t2 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 3:elm +='<div id="l_'+i+'" class="t3 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 4:elm +='<div id="l_'+i+'" class="t4 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 5:elm +='<div id="l_'+i+'" class="t5 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 6:elm +='<div id="l_'+i+'" class="t6 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 7:elm +='<div id="l_'+i+'" class="t7 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 8:elm +='<div id="l_'+i+'" class="t8 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 9:elm +='<div id="l_'+i+'" class="t9 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 10:elm +='<div id="l_'+i+'" class="t10 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                default:elm +='<div id="l_'+i+'" class="t_et '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';
              }
               $('.list').append($(elm));


    }
    $('.list').addClass('add_line');
    $('.thumb').addClass('add_line');
  }
  $(document).on('click','.click',function(){
    $(this).toggleClass('clicked')

    var get_pass = $(this).data("pass");
    $('.thumb').empty();
    $('.thumb').append('<object data='+get_pass+'></object>');
  })

  $(document).on('click','.click_otr',function(){
    $(this).toggleClass('clicked_otr')

    var get_pass = $(this).data("pass");
    $('.thumb').empty();
    $('.thumb').append('<object data='+get_pass+'></object>');
  })
</script>

Comments

[maisumakun]

法則が見つからないのであれば、「法則はないものとして処理する」のがいちばん確実かと思いますが、それでは不満なのでしょうか？

[pegy]

コメントありがとうございます。
不満というよりは、最終的にあるべき配列に並べ替えたいため、法則を知らなければならないという状況です。
もし本当にランダムその前提でこの機能自体利用を諦める判断をします。
ただ、HTMLやJSが標準でランダムで結果を返すようなことは考えづらいため、解を探しております

[maisumakun]

> 最終的にあるべき配列に並べ替えたいため、法則を知らなければならないという状況です。

最終形態の順序がファイル名や内容などだけに依存するものであれば、もともとどんな順序で与えられたかは無関係かと思うのですが。

[maisumakun]

> ただ、HTMLやJSが標準でランダムで結果を返すようなことは考えづらいため

「ブラウザやOSが違えば結果が違う」という可能性は大いに考えられます。

[pegy]

maisumakun様
ご返信ありがとうございます。言葉足らずで申し訳ございません。
OSやブラウザにも依存する可能性があるのですね。ここからは重ねて質問というよりも、現状これを踏まえて実行している環境と判明している事実を記載させていただきます。

Windows10 20HS / Chrome 96.0.4664.45 / Edge バージョン 96.0.1054.43
※ChromeでもEdgeでも同じ結果が得られました。
1A
|-1a.pdf
|-2b.pdf
2Ｂ
|-1c.pdf
|-2d.pdf
|-1C
|-1e.pdf
|-2f.pdf
これらの、ディレクトリのとファイルを配列として受け取った結果、以下の順番であることが判明しております。
[
"2B\1c.pdf",
"2B\2d.pdf",
"2B\1C\1e.pdf",
"2B\1C\2f.pdf",
"1A\1a.pdf",
"1A\2b.pdf",
]

実際に得たい結果の順番は、以下の通りです。名称昇順＋再帰的に取得するイメージです
[
"1A\1a.pdf",
"1A\2b.pdf",
"2B\1c.pdf",
"2B\2d.pdf",
"2B\1C\1e.pdf",
"2B\1C\2f.pdf",
]

更新時間がそれぞれにもかかわらず、一定の秩序が保たれており
一番上のディレクトリの名称に着目して、1Aと1Bの順番が反転するのでarray.reverse()すればよいと考えました。（ここが最終的に法則がわかれば並べ替えたいと申し上げていた部分です）

[pegy]

実際に結果は見ての通りで、一つ深いディレクトリに落ちてからは、名称昇順が保たれています。なぜこのような仕様なのかをあたりが付けることができず、切り分けることができれば、階層ごとにarray.reverse()を実行するしないで、求める配列の形に成形できるかとイメージしておりました。

ただ、冒頭に戻りますが、これがOSやブラウザに依存する話であれば、必ず期待通りに実行されるわけではないため、発想が適切ではないという「一つの解」が得られました。

発想自体が稚拙であり、無能であるとすれば、確かに聡明なpepus様の仰る通り私にはプログラミングは向いていないのかもしれません。そんな聡明な方がわざわざお立ち寄りいただいて時間を割いてコメントまでくださるなんて、痛み入るばかりです。

宜しくお願い申し上げます。

[wakuwaku499]

ソートしたい条件ですが、「ディレクトリ名」・「ファイル名」でソートするということで要望を満たせていますでしょうか？もしそうでしたら、「ディレクトリ名」・「ファイル名」を2次元で配列に持ってソートすれば、元の法則がわからなくてもいいのではないかと思いました。

[pegy]

コメントありがとうございます。
はい、その2つの情報を取得できるのであれば、満たせていると思います。

「ファイル名」はname[i]で取得できます。
一方、当該files[i].webkitRelativePathでは正規表現を利用して"/"で切り「ディレクトリ名」を取得ことはできると考えたのですが、自分のファイルが相対参照の起点になりユーザーの利便性が損なわれるため、webkitRelativePathを利用すること自体を回避することとしました。

前回質問でint32_tにご教示いただいた　url[i] = URL.createObjectURL(files[i]);で取得したurl[i]もバイナリ形式であり、ディレクトリ情報を取得できるわけではないことがわかりました。色々調べた結果、セキュリティ上の理由で正しくディレクトリの情報を取得することが困難であり、結果的にその方式を採ることはできないものと推察しておりました。

Answer 1

関連する仕様は以下のものですが、順番については記述されていませんので、ブラウザの実装依存ということでしょう。順番については何の前提も置かずに、自分の望む結果になるように並び替えしましょう。

• The FileList interface
• File Upload state (type=file)
• webkitdirectory

Comments

[pegy]

コメントを頂き、誠にありがとうございます。
ご提示頂いたドキュメントを自分でもじっくり読み、該当記述がないことや、知らなかった仕様等がないかを確認するために、少しお時間をください。