Filepondis a flexible and fun JavaScript file upload library, that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. Filepond for laravel-admin is laravel-admin extention base on it.
laravel-admin's upload item is hard to use and more complex, and slowly upload while more multiple files, this is a bad user experience. Filepond upload by ajax, suitable for multiple file upload.
first, install laravel-admin, and run below command.
composer require tiderjian/la-filepond
run laravel-admin extention import.
php artisan admin:import filepond
find out the extensions segment in the config/admin.php，add filepond config
'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)
You can extend it by youself, here is a sample that extend a image size validate plugin.
-
download filepond-plugin-image-validate-size,add to public/vendor/laravel-admin-ext/la-filepond/js
-
add to 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
});
- find out the pulgin document, and add config as you like
//imageValidateSizeMinWidth、imageValidateSizeMaxWidth is the config keys
$form->filepondImage('images', 'images')->multiple()->options(['imageValidateSizeMinWidth' => 200, 'imageValidateSizeMaxWidth' => 400]);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent