Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/quansitech/la-filepond

a file upload form widget for laravel-admin
https://github.com/quansitech/la-filepond

filepond laravel-admin laravel-admin-extension

Last synced: about 2 months ago
JSON representation

a file upload form widget for laravel-admin

Host: GitHub
URL: https://github.com/quansitech/la-filepond
Owner: quansitech
License: other
Created: 2019-02-25T08:42:27.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2019-09-10T11:01:17.000Z (over 5 years ago)
Last Synced: 2024-04-24T03:42:06.040Z (9 months ago)
Topics: filepond, laravel-admin, laravel-admin-extension
Language: PHP
Homepage: http://laravel-admin.org/
Size: 334 KB
Stars: 17
Watchers: 2
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.996ICU

Awesome Lists containing this project

README

        # filepond for laravel-admin

![Travis (.com)](https://img.shields.io/travis/com/tiderjian/la-filepond.svg?style=flat-square)

![style ci](https://img.shields.io/travis/com/tiderjian/la-filepond.svg?style=flat-square)

![download](https://img.shields.io/packagist/dt/tiderjian/la-filepond.svg?style=flat-square)

![lincense](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)

[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)

![Pull request welcome](https://img.shields.io/badge/pr-welcome-green.svg?style=flat-square)

## [中文文档](https://github.com/tiderjian/la-filepond/blob/master/README_CN.md)

## About

   [Filepond](https://github.com/pqina/filepond)is 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](https://github.com/z-song/laravel-admin) extention base on it.

   

## Why

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.

## Demo



## Install

first, install [laravel-admin](https://github.com/z-song/laravel-admin), and run below command.

```

composer require tiderjian/la-filepond

```

run laravel-admin extention import.

```

php artisan admin:import filepond

```

## Config

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

    ]

]

```

## Usage

```

//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)

```

## extension

You can extend it by youself, here is a sample that extend a image size validate plugin.

1. download [filepond-plugin-image-validate-size](https://github.com/pqina/filepond-plugin-image-validate-size),add to public/vendor/laravel-admin-ext/la-filepond/js 

2. 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

});

```

3. 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]);

```

## lincense

[MIT License](https://github.com/tiderjian/la-filepond/blob/master/LICENSE.MIT) AND [996ICU License](https://github.com/tiderjian/la-filepond/blob/master/LICENSE.996ICU)