使用 webkit 目录和目录上传文件夹在 safari 浏览器上不起作用

Posted 2023-02-23

【中文标题】使用 webkit 目录和目录上传文件夹在 safari 浏览器上不起作用

【英文标题】：Folder upload using webkitdirectory and directory not Working on safari browser

【发布时间】：2019-09-03 02:52:07

【问题描述】：

我正在尝试使用输入类型文件上传目录。它在 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浏览器的解决方案，请指导我。

我们将不胜感激。

提前致谢，

【问题讨论】：

Safari 不支持文件夹上传。 Check support here

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

@Kanekar 你找到解决方案了吗？现在好像支持了

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

【参考方案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=""
  />
);

【参考方案2】：

我认为没有必要伪造一个 256 长度的扩展字符串。 任何文件都无法匹配的扩展名也可以使用。 我对 NCTH 的回答稍作调整。

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

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