使用 webkitdirectory 进行文件夹上传，但在 Safari 浏览器中无法使用

Question

我正在尝试使用文件输入类型上传目录。

在GoogleChrome和FireFox中运行良好，但是在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浏览器的解决方案，请指导我。

将不胜感激。

谢谢您提前的帮助。

- Kanekar

---

文件夹上传在Safari中不受支持。在此处检查支持情况。 - swapnilmali

@swapnilmali 是的，我已经检查过了。有没有办法在Safari中上传文件夹？ - Kanekar

@Kanekar 你找到解决方案了吗？看起来现在已经支持了。 - Nathália Pissuti

@NatháliaPissuti，不，我还没有找到解决方案。现在需要检查它是否支持。 - Kanekar

Answer 1

嗨，我找到了一种方法，可以让Safari只选择文件夹，但可能有点棘手，需要使用accept扩展名来阻止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=""
  />
);

- NCTH

Answer 2

我认为没有必要伪造一个256长度的扩展字符串。 任何没有文件匹配的扩展名都可以使用。 我对NCTH的答案进行了一些微调。

const fakeExtension = `..`; // no file will match this;

return (
  <input
    type="file"
    accept={fakeExtension}
    webkitdirectory=""
  />
);

- Nick Wong