Livewire でファイルアップロードするには？upload

/ Livewire / By
ショコラ
ショコラ

Livewire でファイルアップロードするには？upload

https://laravel-livewire.com/docs/2.x/file-uploads を参考にファイルアップロードを作ってみます。

もっさん先輩
もっさん先輩

手順

Laravel と Livewire をインストールして、ファイルアップロードのサンプルプログラムを作成する手順。

  1. プロジェクト名（upload）を決めて以下のコマンドを実行します。
curl -s https://laravel.build/upload | bash

インストール時にプロジェクト名のディレクトリが作成されます。

  1. インストールの最後に sudo でパスワードの入力を求められます。

↓下のメッセージが表示されてインストールは終わります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

Get started with: cd upload && ./vendor/bin/sail up
  1. sail のエイリアスを定義します。
echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc
source ~/.bashrc

Laravel のインストールはここまで。

  1. 「sail up」でコンテナを起動します。
cd upload && sail up -d
  1. ララベルのトップディレクトリで、Livewireパッケージ をインストールします。
sail composer require livewire/livewire
  1. 次のコマンドを実行して、uploadコンポーネント を生成します。
sail artisan make:livewire upload
$ sail artisan make:livewire upload
 COMPONENT CREATED  ?

CLASS: app/Http/Livewire/Upload.php
VIEW:  resources/views/livewire/upload.blade.php

次の 2つ のファイルが生成されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Upload extends Component
{
    public function render()
    {
        return view('livewire.upload');
    }
}
<div>
    {{-- The Master doesn't talk, he acts. --}}
</div>

※因みに、renderメソッド を定義しなくても livewire.upload は呼び出されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Upload extends Component
{
}
  1. 生成された uploadコンポーネント のクラスとビューを次のように置き換えます。
<?php
namespace App\Http\Livewire;
use Livewire\WithFileUploads;
class Upload extends \Livewire\Component
{
  use WithFileUploads;
  public $photo;
  public $photo_path;
  public function updatedPhoto() {
    $this->validate([
      'photo' => 'image|max:1024', // 1MB Max
    ]);
    $file_name = $this->photo->getClientOriginalName();
    $this->photo->storeAs('public',$file_name);
    $this->photo_path = 'storage/'.$file_name;
  }
}
<div style="max-width:500px">
  <div class="droparea" style="position:relative; aspect-ratio:100/66; @isset ($photo_path) background-image:url({{ asset($photo_path) }}); background-size:cover; @endif">
    <div class="shadow" style="position:absolute;width:100%;height:100%; background-color:#000;opacity:0.3;"></div>
    <div class="foreground" style="position:absolute;inset:10px; display:flex;justify-content:center;align-items:center; color:#FFF;font-weight:bold; border: dashed 3px #FFF;">
      画像ファイルをここにドロップしてください。
    </div>
    <input type="file" wire:model="photo" style="opacity:0;width:100%;height:100%;">
  </div>
  {{ $photo_path  }}
  @error('photo') <span class="error">{{ $message }}</span> @enderror
</div>
  1. resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。

「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。

mkdir resources/views/layouts/
  1. resources/views/layouts/app.blade.phpファイル を作成します。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <livewire:styles />
  </head>
  <body>
    {{ $slot }}
    <livewire:scripts />
  </body>
</html>
  1. routes/web.php に Livewireコンポーネント のルートを追加します
Route::get('/',App\Http\Livewire\Upload::class);
  1. public/storage で参照できるように、storage/app/public にリンクをはります。
sail artisan storage:link
$ sail artisan storage:link

   INFO  The [public/storage] link has been connected to [storage/app/public].
  1. ブラウザで確認します。

以上

Scroll to Top