ブルーシュ

IT技術の勉強記録

ホーム > Laravel > Tips

【Filament v3】csvファイルをアップロードして読み込む方法

自分用メモシリーズ。
LaravelとFilamentはまだ勉強中なので、「とりあえず動く」を目標にやっています。
自分用メモシリーズの記事は参考程度にしてください。
Filamentのバージョンは3.xです。

はじめに

下記の3ステップで解説します。
(1)Filamentには独自ページを作成する機能があります。
管理画面に「設定」などのページを追加することができます。
Pages - Panel Builder - Filament
 
(2)上記で作成したページに、フォームを設置し、ファイルアップロードできるようにします。
Installation - Form Builder - Filament
 
(3)送信ボタンがクリックされたら、このファイルを読み込んであれこれします。

独自ページを作成

まずは下記の解説のとおりに独自ページを作成します。
Pages - Panel Builder - Filament

今回はcsvファイルをアップロードしたいので、「アップロード」というページを作ることにします。

SSHでコマンドを入力します。まずはcd(シーデー🎤)でLaravelで作成したアプリのトップディレクトリに移動してください。

php artisan make:filament-page Upload

すると、2つのファイルが作成されます。

  • トップ/app/Filament/Pages/Upload.php(←ページクラス)
  • トップ/resources/views/filament/pages/upload.blade.php(ビュー)
  • ページクラス側

    ページクラスを編集します。
    冒頭のuse …などの構成はAdding a form to a Livewire component - Form Builder - Filamentを参考にしています。

    基本的には同解説内のAdding the formの流れに従っています。送信ボタンがクリックされると、フォームデータは$dataで受け取ることができますが、今回はファイルアップロードのみなので、$attachmentという変数に入れます。
    Saving form data to individual propertiesに詳しく載っています。

    CSVファイルを読み込み、事前に作成しておいたUserテーブルに保存していきます。

    <?php
    
    namespace App\Filament\Pages;
    
    use Filament\Pages\Page;
    use Illuminate\Contracts\Support\Htmlable;
    use Filament\Forms\Components\FileUpload;
    use Filament\Forms\Components\TextInput;
    use Filament\Forms\Form;
    
    use Filament\Forms\Concerns\InteractsWithForms;
    use Filament\Forms\Contracts\HasForms;
    use Illuminate\Support\HtmlString;
    use Illuminate\Http\UploadedFile;
    
    use Livewire\WithFileUploads;
    use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
    
    //アップロードされたcsvファイルを読み込んでユーザーとして登録
    use App\Models\User;
    
    
    class Upload extends Page
    {
    
    	use InteractsWithForms;
    	use WithFileUploads;
    
    	//フォームのデータが入る変数
    	//public ?array $data = [];
    	public $attachment;
    
    	//ビューのファイル名
    	protected static string $view = 'filament.pages.upload';
    
    
    	//フォームを初期化
    	public function mount(): void
    	{
    		$this->form->fill();
    	}
    
    	//フォームの設定
    	public function form(Form $form): Form
    	{
    		return $form
    			->schema([
    				FileUpload::make('attachment')
    					->storeFiles(false)
    					->acceptedFileTypes(['text/csv'])
    					->required()
    
    			]);
    			//->statePath('data'); $attachmentで受け取るので不要
    	}
    
    
    	public function csv_register(): void
    	{
    		if($this->attachment){
    
    			//1つ目を取り出す
    			$UploadedFile = array_shift($this->attachment);
    
    			//ファイルパスを取り出す
    			$filepath = $UploadedFile->getRealPath();
    
    			//csvファイルの読み込み
    			$file = new \SplFileObject($filepath);
    			$file->setFlags(\SplFileObject::READ_CSV);
    			$html = "";
    			foreach ($file as $row) {
    
    				list($name, $email) = $row;
    
    				// name が指定したものと一致するレコードを取得
    				$record = User::where('name', $name)->first();
    
    				// レコードが存在しない場合は新規作成
    				if (!$record) {
    					$record =  new User;
    					$record->name = $name;
    				}
    
    				//emailを追加もしくは上書き
    				$record->email = $email;
    
    				//保存
    				$record->save();
    			}
    		}
    	}
    }
    

    ビュー側

    <x-filament-panels::page>
    
    <form wire:submit="csv_register">
    	{{ $this->form }}
    
    	<button type="submit">
    		送信
    	</button>
    </form>
    </x-filament-panels::page>

    wire:submit="csv_register"により、送信ボタンがクリックされるとページクラス側のcsv_register()関数が呼び出されます。

    【Filament v3】csvファイルをアップロードして読み込む方法 #Tips #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #Filament

    作者の似顔絵

    プログラミング歴19年🌈調べたことをブログにまとめていきます。
    記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

    秋田のウェブ活用をサポート

    ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
    ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

    その他、フロントエンド案件のご依頼はインフォメーション

    秋田市 レンタル着物 笹パンダ堂のバナーリンク