javascript - 使用 webkitdirectory 和目录上传文件夹不适用于 safari 浏览器

Question

我正在尝试使用输入类型文件上传目录。它在 GoogleChrome 和 FireFox 中工作正常，但是当我在 Safari 浏览器中测试它时，它无法正常工作，它也允许用户选择单个文件。有什么方法可以限制用户选择单个文件，并且只允许在 Safari 浏览器中选择文件夹。

这是我使用的代码:

const UploadFolder = props => {
  return (
<span>
<a className="dropdown-item" href='#'>
  <i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true"></i>Upload Files Folder</a>
 <input type='file' onChange={(e) => { props.onFolderSelect(e) }} 
 directory="" webkitdirectory="" mozdirectory="" allowdirs="" multiple />
</span>
)
}

export default UploadFolder;

如果有人知道 Safari 浏览器的解决方案，请指导我。

任何帮助将不胜感激。

提前致谢，

Answer 1

嗨，我发现了一种使 safari 只能选择一个文件夹的方法，但是通过使用接受扩展名来阻止 safari 中的所有文件扩展名可能有点棘手
在 macOS 中，最大文件扩展名长度限制为 255 个字符，因此我将生成长度超过 255 个字符的随机扩展名并将其传递到 webkitDirectory 输入类型文件中

// Example
const fakeExtension = `.${a.repeat(256)},`;
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
return (
  <input
    type="file"
    id="folder-uploader"
    accept={isSafari ? fakeExtension : ''}
    webkitdirectory=""
  />
);