javascript - 如何从 Firefox 的上传处理程序中过滤掉目录？

Question

问题

我有以下代码片段用于在文件拖放上传期间获取文件信息:

var files = event.dataTransfer.files;

for (var i = 0; i < files.length; i++) {
    var file = files[i];

    // I need notDirectory(file) function.
    notDirectory(file).then(function(file) {
      output.innerHTML += 
           `<p>
              Name: ${file.name}</br> 
              Size: ${file.size} bytes</br> 
              Type: ${file.type}</br> 
              Modified Date: ${file.lastModifiedDate}
            </p>`;
    });
}

我做了研究，发现 Firefox 不支持目录上传，但允许客户端将它们拖放到拖放区。

问题

如何从 Firefox 的上传处理程序中过滤掉目录？

更新

您可以在这里找到工作示例:https://jsfiddle.net/gevorgha/exs3ta25/

请考虑我需要它来处理 the latest stable Firefox version - 46.0.1无需从浏览器启用额外的首选项，因为我不想要求用户启用首选项以使上传正常工作。

Answer 1

My question would be is there any workaround for latest stable Firefox version to detect directories? Because on stable version that feature is disabled by default or do I miss something?

目录上传在 firefox 47 默认情况下未启用，已尝试 html , javascript在 stacksnippets，jsfiddle。

参见 Firefox 42 for developers Interfaces/APIs/DOM

The Directory interface has been experimentally extended (bug 1177688). The two members Directory.path and Directory.getContents can be exposed by setting the dom.input.dirpicker preference to true.

检测文件夹上传的解决方法可能包括

1. 使用<input type="file">与 directory和 allowdirs属性集，可能包括 multiple属性，参见 Note , 用于拖放或用户点击容器选择；
2. 打开prefs.js或 about:config并设置 dom.input.dirpicker偏好 Boolean true ;
3. 在 Directory Upload Demo 为“1. 文件输入”使用“代码示例”的修改版本;
4. 检查上传是否为 Directory 而不是一个File对象，使用 if有条件 (filesAndDirs[0] && filesAndDirs[0].constructor.name === "Directory")或 (filesAndDirs[0] instanceof Directory) .then(function(filesAndDirectories){}) 内部在链接到 .getFilesAndDirectories() ;
5. 替代<label> <div> 的元素元素作为 <input type="file"> 的父元素.调整css的 input type="file"填充父级可放置容器并设置 opacity至 0 ;调整css在 input type="file" 的父元素中在 :before 处显示文本伪元素，超过 input type="file"子元素。

另见 New API for directory picking and drag-and-drop .

请注意，在 firefox 47 上尝试了该方法，目录和单个文件均已成功上传。

var dropArea = document.getElementById("dropArea");
var output = document.getElementById("result");
var ul = output.querySelector("ul");

function dragHandler(event) {
  event.stopPropagation();
  event.preventDefault();

  dropArea.className = "area drag";
}

function filesDroped(event) {
  event.stopPropagation();
  event.preventDefault();
  dropArea.className = "area";

  var uploadFile = function(file, path) {
    // handle file uploading
    console.log(file, path);
    var filesInfo = `<li>
                        Name: ${file.name}</br> 
                        Size: ${file.size} bytes</br> 
                        Type: ${file.type}</br> 
                        Modified Date: ${file.lastModifiedDate}
                      </li>`;
    ul.innerHTML += `${filesInfo}`;
  };

  var iterateFilesAndDirs = function(filesAndDirs, path) {
    for (var i = 0; i < filesAndDirs.length; i++) {
      if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') {
        var path = filesAndDirs[i].path;

        // this recursion enables deep traversal of directories
        filesAndDirs[i].getFilesAndDirectories()
          .then(function(subFilesAndDirs) {
            // iterate through files and directories in sub-directory
            iterateFilesAndDirs(subFilesAndDirs, path);
          });
      } else {
        uploadFile(filesAndDirs[i], path);
      }
    }
  };
  if ("getFilesAndDirectories" in event.target) {
    event.target.getFilesAndDirectories()
      .then(function(filesAndDirs) {
        // if directory
        var dir = filesAndDirs;
        if (dir[0] && dir[0].constructor.name === "Directory") {
          
          console.log(dir);
          var directoryInfo = `<li>
                        Directory Name: ${dir[0].name}</br> 
                        Path: ${dir[0].path}
                      </li>`;
          ul.innerHTML += `${directoryInfo}`;
          alert("isDirectory:true");
        }
        iterateFilesAndDirs(dir, "/");
      })

  } else {
    // do webkit stuff
  }
}

dropArea.addEventListener("dragover", dragHandler);
dropArea.addEventListener("change", filesDroped);

input[type="file"] {
  width: 98%;
  height: 180px;
}

label[for="file"] {
    width: 98%;
  height: 180px;
}

.area {
  display:block;
  border: 5px dotted #ccc;
  text-align: center;
}

.area:after {
  display: block;
  border:none;
  white-space: pre;
  /*content: "Drop your files here!\aOr click to select files";*/
  position: relative;
  left: 0%;
  top: -75px;
  text-align:center;
}

.drag {
  border: 5px dotted green;
  background-color: yellow;
}

#result ul {
  list-style: none;
  margin-top: 20px;
}

#result ul li {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

<label id="dropArea" class="area">
  <input id="file" type="file" allowdirs directory webkitdirectory/>
</label>
<output id="result">
  <ul></ul>
</output>

jsfiddle https://jsfiddle.net/exs3ta25/31/