问题标签 [file-system-access-api]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
127 浏览

javascript - File System Access API: how to send a fileHandle with postMessage?

I'm working with the File System Access API and I have to send a FileSystemDirectoryHandle calling a postMessage(), according to this article it seems to be possible

File handles are serializable, which means that you can save a file handle to IndexedDB, or call postMessage() to send them between the same top-level origin.

I made many try but... noway

In this question @DenverCoder9 proposes a working example for the indexedDb but I can't find anything for the postMessage

Thanks, Davide

0 投票
1 回答
176 浏览

javascript - 当用户通过 showSaveFilePicker 保存 blob 时建议文件名

不确定这是否是愚蠢的要求,但在网上找不到任何东西:

我网站上的用户可以将文件保存到他们的磁盘:

如您所见,此文件不在任何服务器上,而是来自 blob。它工作正常,但我想建议一个比 simple 更好的文件名Untitled.mp3,这样理想情况下用户只需要按回车键而不必担心命名文件(但如果她愿意,可以这样做) .

这可能吗?

我在看这个这个,但找不到任何有用的东西!

我知道在 Chrome 91 中我可以做到:

  • 但是是否有适用于更多浏览器和旧 Chrome 版本的东西?
0 投票
2 回答
441 浏览

javascript - 使用 showDirectoryPicker() 访问子目录文件内容

使用File System Access API,我将如何访问包含在所选目录的文件夹中的文件?

0 投票
1 回答
227 浏览

javascript - 是否可以使用 Chrome 的文件系统访问 API 附加到现有文件

使用新File System Access API的可以读取和写入用户设备上的文件和文件夹:

上面的代码会将“Hello World”写入所选文件。如果文件已经存在,它将被截断并用新内容覆盖。

是否可以在不读取整个文件并再次写入的情况下追加到现有文件?一个很好的例子是写入日志文件。

0 投票
1 回答
187 浏览

javascript - 如何从文件系统访问 api window.showDirectoryPicker() 获取选定的目录路径

当我选择一个文件夹时,我确实得到了一个 dirHandle 但无法弄清楚什么属性或方法会给我完整路径

所以像 let path = dirHandle.fullpath

有任何想法吗?

0 投票
1 回答
259 浏览

javascript - 你如何获得 showDirectoryPicker(); 从文件系统访问 Api 到即使您将 dirHandle 存储在 IndexDB 中也不会请求许可

当你调用 showDirectoryPicker(); 你得到一个目录选择器。选择目录后,chrome 会询问您查看该文件夹中文件的权限。

示例代码:

上面的代码会在您每次选择文件夹时询问权限,即使您已经授予了访问权限。

您应该能够将 dirHandle 存储在 indexDB 中,这样如果用户已经授予权限,那么如果您使用 indexDB 中已保存的句柄并选择已授予权限的文件夹,它将不会再次请求权限。

问题是我正在向/从 indexDb 保存和检索 dirHandle,但它仍然要求我已经授予权限的文件夹的权限。

我认为应该可以工作的代码:注意——get 和 set 只是保存和加载到 indexDb 的简写

因此,在上面的代码中,我从 indexDb 中检索 dirHand,然后将其设置为dirHand = window.ShowDirectoryPicker. 将弹出一个窗口,要求您选择一个文件夹。如果我选择一个我已经授予权限的文件夹,即使在页面刷新后也不应该再次请求权限。如果您不刷新页面,它可以正常工作。

我很确定这应该可以在这个示例项目中看到https://github.com/GoogleChromeLabs/text-editor/

这个项目来自这篇很好的文章,解释了如何实现这些结果,但显然它对我不起作用。请参阅文章https://web.dev/file-system-access

您可以尝试使用他的文本编辑器来演示,即使在页面刷新后,您也不会被要求从先前授予的文件夹中获得权限。查看现场演示https://googlechromelabs.github.io/text-editor/

示例转到文件 > 打开并选择一个文件。如果这是第一次打开此文件夹中的任何文件,它会询问您查看文件的权限。现在刷新页面并尝试打开同一个文件。它不会再次要求预先许可,您可以保存文件。它会在您第一次保存文件时请求权限,但不会在后续调用时请求权限。我查看了他的代码,但我无法弄清楚我做错了什么。任何帮助是极大的赞赏。泰

0 投票
0 回答
32 浏览

javascript - 你如何使用 npm pngjs web 版本解析方法来获取 png 文件并将文件写入磁盘

我在 stackoverflow 上阅读的问题并没有帮助我解决我的问题。

这是所有客户端代码,没有nodejs。

我有使用 Fetch api 在 response.body 中返回 png 的代码。我可以使用 File System Access Api 成功将此文件写入磁盘。在不通过 pngjs 处理 png 的情况下,图像被正确保存。

尽管 pngjs 说它接受一个可读流并且 response.body 应该是一个可读流,但 pngjs 会抛出一个错误。我的猜测是网络上的可读流与nodejs格式不同。但是,我可以将 fetch 中的数据作为 ArrayBuffer 返回,而 pngjs 将毫无问题地接受这一点。

我的问题是从 pngjs parse 方法返回的 png 已损坏,即使我实际上没有对 parsed 方法中的图像做任何事情。

这是一些代码。

//Fecth png 到 ArrayBuffer

//用pngjs解析arrayBuffer

//将文件写入磁盘

在解析方法期间,我没有对数据做任何事情,只是为了测试。

从上面的代码中,如果我只返回 arrayBufferres(arrayBuffer)文件是正确的。但是,我是否将它传递给 pngjs 解析方法,即使我没有修改它原来已损坏的文件。

当我不解析文件时,它返回正确大小的 ArrayBuffer 并写出大小为 595kb 的文件,arrayBuffer 大小为 608325

当我解析文件时,即使我没有修改它。生成的文件大小为 1024kb,ArrayBuffer 大小为 1048576。

从两个进程返回的 ArrayBuffer 都是 uint8Array 类型。

预期结果:是不是因为我没有在 pngjs 解析方法中更改文件,所以返回的 ArrayBuffer 应该是相同的大小并且文件不应该被损坏。

更新: 我尝试了不同的 png 编码器/解码器库,结果相同。

0 投票
1 回答
76 浏览

javascript - 访问看起来像 Mac 上的文件的目录

我正在为 Chrome 浏览器创建一个脚本来处理文件(使用File System Access API)。这在 Windows 上完全没问题,但在 MAC 上我有这个问题:

这些文件存储在看起来像 MAC 上的文件的文件夹中。例如文件夹名称是thisisfolder.xyz,里面有像file.xml.

如果我选择目录处理程序 ( handle.getDirectoryHandle(someDirectory)),那些文件夹 ( thisisfolder.xyz) 将显示为灰色且无法选择。如果选择文件处理handle.getFileHandle(someDirectories)程序thisisfolder.xyz

我这里有可能吗?

0 投票
0 回答
34 浏览

javascript - 在铬中执行 WritableStream.close() 时“在后台工作”光标

我们正在开发一种网络工具来记录用户屏幕和网络摄像头的视频。
有些人录制超过一小时的大型视频。通过使用文件系统访问 API(在 Windows 上的 Chrome 和 Edge 中),我们希望将录制的视频备份到主机文件系统中的文件,以防浏览器或 PC 崩溃。除了关闭 WritableStream ( )
时的一个副作用之外,所有这些都按预期工作。WritableStream.close()关闭 Stream 时,光标会很快将系统范围更改为窗口“在后台工作”光标。

在后台光标窗口中工作

有谁知道是否有任何解决方案可以防止 Chrome/Edge/Chromium 更改光标?因为我们正在记录用户的屏幕,所以每隔几秒更改一次光标是不可接受的。

示例代码:

0 投票
1 回答
71 浏览

javascript - FileSystemHandle.requestPermission DOMException:需要用户激活才能请求权限

我需要在我的网站中打开本地文件功能,因此我在代码中使用了文件系统访问 API。当从本地打开的文件被我的网站编辑并需要保存到原始文件时。我发现它没有权限。因此,我找到了请求文件句柄权限的方法,如下所示:

但是当我 fileHandle.requestPermission(options)对它执行控制台错误时

我错过了什么?谢谢QQ