README

日本語ReadMeはこちら

About This Package

• Introduction
• Installation
• Setup Command
• Usage
  • CSV Importer Component
  • Button Component
  • In TALL stack project
  • In none TALL Stack project
  • Using Queues
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Inspiration
• Credits
• License

Introduction

Livewire CSV Package is a package created on top of Laravel livewire for easily handling imports with a simple API. And added some bug fixes to original Codecourse code and package.

Note:

This package uses database UPSERT command behind to update (or create) your data.
Please refere to CSV Importer Component for detailed description 🫡

Installation

You can install the package via composer:

composer require askdkc/livewire-csv

Setup Command

You can run livecsv-setup command to publish nessesary migration files and config file for this package.

php artisan livecsv-setup

This command, after publishes files, ask you to run the migration for you. If you want to run the migration by youself then just answer no. Otherwise, type "yes" to run the migration.

This command also ask you to star this repo. If you don't mind helping me, please star the repo. (Thanks in advance)

Add use HasCsvImports to your User Model

You need to implement HasCsvImports to your User model.

Open app/Models/User.php and edit like below:

<?php

namespace App\Models;

use Laravel\Sanctum\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Askdkc\LivewireCsv\Concerns\HasCsvImports; // add
...

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable, HasCsvImports; // add HasCsvImports here
    

Usage

CSV Importer Component

Using this package is easy. To implmenent the importer in your project, simply include the following component inside a Blade view.

    <livewire:csv-importer :model="App\Models\YourModel::class"
                            :columns-to-map="['id', 'name', 'email']"
                            :required-columns="['id', 'name', 'email']"
                            :column-labels="[
                                'id' => 'ID',
                                'name' => 'Name',
                                'email' => 'Email Address',
                            ]"
                            :upsert-columns="['name', 'email']" // This is optional
                        />

Note: In order to use :upsert-columns, you need to have a "primary" or "unique" index. Without specifying :upsert-columns, the importer will default to using the id column for upserting.

If you want to user other columns for upsert, like example above, add following index to your model's migration：

  $table->unique(['name', 'email']);

If you want to use an other primary key rather than id, let's say email, you need to remove default id and add following index to your model's migration：

  // $table->id(); You need to remove or comment out this line because you cannot have multiple primary keys
  $table->string('email')->primary();

Button Component

The Component uses alpinejs under the hood. To display an import button, include the x-csv-button component.

<x-csv-button>Import</x-csv-button>

To style the button, use the class attribute with Tailwind utility classes.

<x-csv-button 
        class="rounded py-2 px-3 bg-indigo-500 ..."
        type="button"
        ....>
    {{ __('Import') }}
</x-csv-button>

Manual Configuration

If you are not using livecsv-setup command, follow these steps to manually configure package setup process.

Publish and run the migrations with:

php artisan vendor:publish --tag="livewire-csv-migrations"
php artisan migrate

Csv Import uses Queue Worker so you need to create these tables:

php artisan queue:table
php artisan queue:batches-table
php artisan migrate

Publish the config file with:

php artisan vendor:publish --tag="livewire-csv-config"

The following is the contents of the published config file:

return [

    /*
    |--------------------------------------------------------------------------
    | Default Layout
    |--------------------------------------------------------------------------
    |
    | This package plans on supporting multiple CSS frameworks. 
    | Currently, 'tailwindcss' is the default and only supported framework.
    |
    */
    'layout' => 'tailwindcss',
    
    /*
    |--------------------------------------------------------------------------
    | Default File Type
    |--------------------------------------------------------------------------
    |
    | If you change file_type to tsv, it can handle tsv files.
    |
    */
    'file_type' => 'csv',

    /*
    |--------------------------------------------------------------------------
    | Default Set Delimiter
    |--------------------------------------------------------------------------
    |
    | If you change Set Delimiter to file.
    |
    */
    'set_delimiter' => ',',

    /*
    |--------------------------------------------------------------------------
    | Max Upload File Size
    |--------------------------------------------------------------------------
    |
    | The default maximumum file size that can be imported by this
    | package is 100MB. If you wish to increase/decrease this value, 
    | change the value in KB below.
    |
    */
    'file_upload_size' => 102400,
];

The layout option is for choosing which CSS framework you are using and currently supports only tailwindcss. We are working on other CSS frameworks to implement in the future.

The file_type option is for choosing either CSV or TSV file. If your file is TSV type, change this to tsv.

The set_delimiter option is for choosing a delimiter of your CSV file. If your file is using, for example ; rather than ,, then change this to ';'.

The file_upload_size is for validation rules, and it defines the maximum file size of uploaded files. You may also define this value from the livewire config file.

Optionally, you can publish the views using

php artisan vendor:publish --tag="livewire-csv-views"

Before Using this command, please take a look at this section below.

In TALL stack project

If you are using this package in a TALL Stack project, (Tailwindcss, Alpinejs, Laravel, Livewire) publish the vendor views to include livewire-csv in your project.

php artisan vendor:publish --tag="csv-views"

Then compile your assets.

npm run dev

In none TALL Stack project

If you are not using the TALL Stack, use the csv directives to add the necessary styles/scripts.

<html>
    ...
    <head>
        ...
        @csvStyles
    </head>
        ...
    <footer>
        ...
        @csvScripts
    </footer>
</html>

Using Queues

This package uses queues under the hood with PHP Generators to make it fast and efficient.

Create the batches table by running

php artisan queue:batches-table

Then, run the migration.

php artisan migrate

After that, set up the queues' configuration. Head to Laravel Queues Documentation to learn more.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Inspiration

This Package Was Inspired by codecourse video series. If you want to learn how this package was created, make sure to take a look at this video series

Credits

• askdkc
• ousid Original Package Creator
• Alex Garrett-Smith Originally introduced this app through his Codecourse.
  If you want to learn deeper, subscribe his Codecourse series (it's really good!).
• All Contributors

License

The MIT License (MIT). Please see License File for more information.