Livewire files

Uploading file using Livewire and Tailwind.

• Installation
• Requirements
• How to use
• Configuration
• Plan

Installation

composer require akhaled/livewire-files

Requirements

Frontend packages are required:

• AlpineJS
• Tailwind Components
• Sweetalert2

How to use

1. Add livewire component to your view

This component only displays a button within your content. This button is linked to tailwind modal.

@livewire('files-upload', [
    'image' => true, // accept only image, optional
    'mimes' => 'pdf,csv', // or specify mime type, optional
    'max' => 1024 // max 1024kb by default
])

2. Add scripts

...
@livewireScript
<script src="{{ mix('js/app.js') }}"></script>
@livewireSweetalertScripts
...

Configuration

php artisan vendor:publish --tag=livewire-files

Will generate global config file.

store_dir

Default is public (storage/public). You need to add the following line in config/filesystems.php under links property:

public_path('storage') => storage_path('app/public')

validation

• image: only accept images, default = false
• mimes: accepted mimes, default = null (accepting everything)
• max: maximum uploaded size, default = 102400 (in kilobytes)

Plan

• Show toast on uploaded!
• Hide input file and show javascript link
• Move content to modal
• Show sweetalert popups instead of static alert
• Add button text and button color for upload button
• Specify upload files names
• Move uploads to directory year/month/day