README

中文文档

关于

Filepond是一个灵活且有趣的JavaScript文件上传库，可以上传任何你扔给它的东西，优化图片以提高上传速度，并提供极佳的、易于访问的、顺滑的用户体验。laravel-admin 的 Filepond 扩展是基于它构建的。

原因

laravel-admin 的上传项难以使用且复杂，在上传多个文件时速度缓慢，这是不好的用户体验。Filepond 通过 AJAX 上传，适合多文件上传。

演示

安装

首先，安装 laravel-admin，并运行以下命令。

composer require tiderjian/la-filepond

运行 laravel-admin 扩展导入。

php artisan admin:import filepond

配置

在 config/admin.php 中找到 extensions 段落，添加 filepond 配置

'extensions' => [
    'filepond' => [
        // enable or disable the extension
        'enable' => true,
        // atuo delete the uploaded files(default false)
        'autodelete' => true
    ]
]

使用

//image upload
$form->filepondImage(@database column, @label)
//file upload
$form->filepondFile(@database column, @label)

//multiple images upload
$form->filepondImage(@database column, @label)->multiple()
//multiple files upload
$form->filepondFile(@database column, @label)->multiple()

//ps:multiple upload save to database in json，must set the casts to json on the model.
protected $casts = [
    'images' => 'json',
    'files'  => 'json',
];

//set required
$form->filepondImage(@database column, @label)->rules('required')

//set file type that can be uploaded.
$form->filepondFile(@database column, @label)->mineType(['application/msword', 'application/pdf'])
$form->filepondFile(@database column, @label)->mineType('application/msword')

//set max file size, unit: KB
$form->filepondFile(@database column, @label)->size(30)

扩展

你可以自己扩展它，这里有一个示例，扩展了一个图片尺寸验证插件。

1. 下载 filepond-plugin-image-validate-size，并将其添加到 public/vendor/laravel-admin-ext/la-filepond/js

2. 添加到 app/Admin/bootstrap.php

\Encore\Admin\Admin::booting(function(){
    \Qs\La\Filepond\File::extendPluginJs(['/vendor/laravel-admin-ext/la-filepond/js/filepond-plugin-image-validate-size.min.js']);
    \Qs\La\Filepond\File::extendPlugin('FilePondPluginImageValidateSize');
    //use the \Qs\La\Filepond\File::extendPluginCss function to add css file
});

1. 找到插件文档，并添加你喜欢的配置

//imageValidateSizeMinWidth、imageValidateSizeMaxWidth is the config keys
$form->filepondImage('images', 'images')->multiple()->options(['imageValidateSizeMinWidth' => 200, 'imageValidateSizeMaxWidth' => 400]);

许可证

MIT 许可证 AND 996ICU 许可证