README

一个用于显示和选择WebDAV服务器文件和文件夹的Laravel包。

特性

• 从WebDAV服务器检索文件和文件夹列表
• 使用WebDAV API: propfind
• 无需挂载
• 快速
• 支持多用户
• 支持作为API的外部使用
• 使用hummingbird-treeview包提供复杂的客户端模板
• 以层次树结构显示文件和文件夹
• 可以启用/禁用不同的选项，例如。
  • 只选择一个文件
  • 选择一个或多个文件
  • 选择整个文件夹
  • 全选
• 根据文件类型（例如 .jpg, .txt）和任意模式进行筛选
• 方便的搜索功能
• ...以及更多

依赖项

• Laravel 5.5.*
• PHP 7.0
• cURL扩展已启用

包含的库

• jQuery 3.3.1
• bootstrap 4.0.0
• font-awesome
• hummingbird-dev/hummingbird-treeview

这意味着这些库（或其部分）包含在webdav-fileselector包中。因此不需要下载/安装这些库。

入门

安装

通过composer安装，并在您项目的根目录中运行以下命令

composer require hummingbird-dev/webdav-fileselector

将以下内容添加到您的composer.json中（位于您的项目根目录）

...
"autoload": {
   ...
   "psr-4": {
      "App\\": "app/",
      "HummingbirdDev\\WebdavFileselector\\":"vendor/hummingbird-dev/webdav-fileselector/src/"
   }
   ...
},

从您的项目根目录更新composer

composer update

从您的根文件夹发布资源

php artisan vendor:publish --provider="HummingbirdDev\\WebdavFileselector\\WebdavFileselectorServiceProvider"

使用

启动本地开发服务器

php artisan serve

并导航到https://:8000/webdav-fileselector-get

您将看到客户端模板，它可以在"/resources/views/hummingbird-dev/webdav-fileselector.blade.php"中编辑。

有两种方法可以包含所需的WebDAV凭证和提交可选设置。

首先，可以在"/resources/views/hummingbird-dev/webdav-fileselector.blade.php"中编辑客户端或在任何其他页面上使用额外的POST表单来调用客户端。此表单可能如下所示

<form method="POST" action="https://:8000/webdav-fileselector-get">
	<input type="hidden" name="b2drop_username" value="smieruch">
	<input type="hidden" name="b2drop_password" value="password">
	<input type="hidden" name="b2drop_url" value="https://:8099/remote.php/webdav/">
	<input type="hidden" name="select_only_one_item" value="1">
	<input type="hidden" name="show_only_parent_folder" value="0">
	<input type="hidden" name="disable_folder_checking" value="1">
	<input type="hidden" name="disable_root_node" value="0">
	<input type="hidden" name="getChecked_onlyEndNodes" value="1">
	<input type="hidden" name="filter" value="">
	<input type="hidden" name="fileselector_height" value="300">
	<input type="hidden" name="minimal_view" value="0">
	<input type="hidden" name="jumbotron" value="1">
	<button type="submit">Start Fileselector</button>
</form>

webdav-fileselector作为服务

有趣的一点是，这个HTML表单可以实现在任何其他网页上。因此，可以在其他Web项目中提供此服务。一种集成方法是将iframe放置在页面上

<iframe name="my_iframe" width="100%" height="400px" src=""></iframe>

并将表单指向iframe，使用"target"属性，这意味着在iframe中打开表单POST的响应

<form method="POST" action="https://:8000/webdav-fileselector-get" target="my_iframe">
	<input type="hidden" name="b2drop_username" value="smieruch">
	<input type="hidden" name="b2drop_password" value="password">
	...

参数

以下参数是必需的

• b2drop_username
  这是登录WebDAV服务器所需的用户名。

• b2drop_password
  登录WebDAV服务器所需的相应密码。

• b2drop_url
  WebDAV服务器的URL。如果它是一个ownCloud或nextCloud实例，则URL为https://example.com/remote.php/webdav。

以下设置是可选的，并且所有默认值。这些设置主要影响用于显示文件和文件夹的hummingbird-treeview的功能。所有这些设置的值都是字符串，尽管许多行为类似于布尔值true和false。

• 选择单个项
  此参数可以通过将value="1"启用或通过将value="0"禁用来禁用。默认值为value="1"。如果激活，则只能检查树视图中的单个项。这提供了一个典型功能，即用户只能选择单个文件而不是多个。需要注意的是，参数禁用文件夹检查也应启用。

• 禁用文件夹检查
  要禁用检查整个文件夹的功能，必须将此参数设置为value="1"，否则必须使用value="0"。默认值为value="1"。激活此参数是必要的，如果上述参数选择单个项也激活了，则可以限制选择项为单个文件。

• 仅显示父文件夹
  这是一个特殊参数，可以通过将value="1"来激活或通过将value="0"来禁用。默认值为value="0"。如果激活，则返回的列表（下面详细介绍）不包含选定的文件，而是只包含包含选定文件的文件夹，即父文件夹。

• 禁用根节点
  同样，此设置可以通过value="1"来激活，并通过value="0"来停用。默认值为value="0"。如果激活，则根节点被禁用，这意味着它不能被检查。

• 仅获取选中的末节点
  这是一个重要的参数，通过value="1"激活，并通过value="0"停用。默认值为value="1"。如果激活，则返回的列表（下面详细介绍）只包含选中的文件，而不是选中的文件夹。

• 过滤器
  过滤是一个强大的选项，用于仅选择某些文件。例如，如果value=".txt"，则只显示名称中包含".txt"的文件。默认值为空字符串value=""，表示没有过滤。如果value="myfile"，则只显示名称中包含"myfile"的文件。此外，还可以在"OR"意义上过滤多个字符串。如果value=".jpg|.png|.bmp"，则只显示包含".jpg"、"".png"或".bmp"的文件。

• fileselector_height 此参数定义了包含hummingbird-treeview的<div>的高度（以像素为单位）。它是可滚动的，因此如果需要，可以选择较小的尺寸。默认值为value="400"像素。

• minimal_view 如果通过value="1"激活（通过value="0"停用），则只显示标题、搜索字段和树视图。否则，包括更多标记。默认值为value="0"。

• jumbotron 如果通过value="1"激活（通过value="0"停用），则将树视图放置在Bootstrap Jumbotron上，即基本上是一个灰色块。

事件 -- 获取选定的文件

在hummingbird-treeview上对每个文件的检查或取消检查都会触发一个事件，该事件包括选定的文件。如webdav-fileselector.blade.php文件所示，在文件末尾有一个小的JavaScript代码片段

 window.addEventListener("message",function(e) {
     //console.log("message event",e);
     var key = e.message ? "message" : "data";
     data = e[key];
     console.log("file_path= " + data.dataid)
     console.log("file_id= " + data.id)
     console.log("file_text= " + data.text)
 },false);

此JavaScript代码获取选定的文件列表，这些文件存储在此对象data中。该对象包含数组，其中data.dataid包含选定文件的完整路径。data.id包含一个id，它基本上是一个字符串和运行数字的组合，此处不重要。data.text包含在treeview中显示的文本，它通常与实际文件名相似。