Laravel - livewire で zip ファイルをアップロード・自動解凍

(2024-05-30)

laravel + livewire で zip ファイルをアップロードして自動解凍します。

Livewire コンポーネントの作成

Livewire コンポーネントを作成します。

php artisan make:livewire ZipUpload

ZipUpload.php を編集します。

app/LiveWire/ZipUpload.php
<?php


namespace App\Livewire;


use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Storage;
use ZipArchive;


class ZipUpload extends Component
{
    use WithFileUploads;


    public $zipFile;


    public function save()
    {
        $this->validate([
            'zipFile' => 'required|mimes:zip|max:10240', // 10MB Max
        ]);


        // Store the uploaded zip file
        $zipPath = $this->zipFile->store('zips');


        // Extract the zip file
        $this->extractZip($zipPath);


        session()->flash('message', 'Zip file successfully uploaded and extracted.');
    }


    private function extractZip($zipPath)
    {
        $zip = new ZipArchive;
        $storagePath = storage_path('app/' . $zipPath);
        $extractPath = storage_path('app/extracted');


        if ($zip->open($storagePath) === TRUE) {
            $zip->extractTo($extractPath);
            $zip->close();
        } else {
            session()->flash('error', 'Failed to extract the zip file.');
        }
    }


    public function render()
    {
        return view('livewire.zip-upload')->layout('layouts.base');
    }
}

zip-upload.blade.php を編集します。

resources/views/livewire/zip-upload.blade.php
<div>


    <h1 class="text-3xl bg-blue-50 border border-stone-400 p-5 py-3 m-3">zip ファイルのアップロードと自動解凍</h1>


    <p class="m-5">アップロードする zip ファイルを選択してください。</p>


    <input type="file" wire:model="zipFile" class="m-5">


    <div class="mx-5">
        <button wire:click="save" class="mt-4 bg-blue-500 text-white font-bold py-1 px-4 rounded">アップロード・解凍</button>
    </div>


    @error('zipFile') <span class="error m-5">{{ $message }}</span> @enderror


    @if (session()->has('message'))
        <div class="alert alert-success m-5">
            {{ session('message') }}
        </div>
    @endif


    @if (session()->has('error'))
        <div class="alert alert-danger m-5">
            {{ session('error') }}
        </div>
    @endif


</div>

welcome.blade.php の編集

resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')
    <title>Top Page</title>


</head>
<body>
    <h1 class="text-4xl bg-blue-50 border border-stone-400 px-5 py-2 m-3">Menu</h1>


    <ul class="list-disc leading-10 mx-10 px-5">
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('item.create') }}">投稿する</a></li>
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('items.list') }}">データリスト</a></li>
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('imgchange') }}">画像切り替え</a></li>
        <li class="text-blue-800 hover:text-orange-800 delay-150"><a href="{{ route('zipupload') }}">zipアップロード</a></li>
    </ul>
</body>
</html>

ルーティング

routes/web.php
<?php


use App\Livewire\ItemList;
use App\Livewire\ItemCreate;
use Illuminate\Support\Facades\Route;
use App\Livewire\ImageSwitcher;
use App\Livewire\ZipUpload;


Route::get('/', function () {
    return view('welcome');
});


Route::get('/item-create', ItemCreate::class)->name('item.create');
Route::get('/items-list', ItemList::class)->name('items.list');
Route::get('/image-switcher', ImageSwitcher::class)->name('imgchange');


Route::get('/upload', ZipUpload::class)->name('zipupload');

必要なディレクトリの作成と権限の設定

解凍されたファイルを保存するためのディレクトリを作成し、書き込み権限を設定します。

mkdir -p storage/app/extracted
chmod -R 775 storage

実行

サーバーを起動して、「zip upload」を選択すると、

zip ファイルを選択してボタンを押すと、storage/app/extracted に解凍されたファイルが保存されています。

Failed to extract the zip file

半年前には zip ファイルをアップロードができたのですが、2024 年 12 月に再度プロジェクトから作ってみると、上のようなエラーが出るようになりました。

app/LiveWire/ZipUpload.php の extractZip.php でエラーをログに記録するようにします。

app/LiveWire/ZipUpload.php
    private function extractZip($zipPath)
    {
        $zip = new ZipArchive;
        $storagePath = storage_path('app/' . $zipPath);
        $extractPath = storage_path('app/extracted');


        if ($zip->open($storagePath) === TRUE) {
            $zip->extractTo($extractPath);
            $zip->close();
        } else {
            \Log::error('Failed to extract the zip file.', [
                'zip_path' => $storagePath,
            ]);
            session()->flash('error', 'Failed to extract the zip file.');
        }
    }

で、ログ(storage/logs/laravel.log)を見ると

local.ERROR: Failed to extract the zip file. {"zip_path":"/home/moheno/larachat/storage/app/private/zips/zips/dGxE6a8lqOmK6mPvi0nRDC08r51e6nneQFouuFdf.zip"}

どういうわけか「/home/moheno/project/storage/app/private」にアップされています。

この設定は「config/filesystems」で設定されるようで、

    'disks' => [


        'local' => [
            'driver' => 'local',
            'root' => storage_path('app/private'),
            'serve' => true,
            'throw' => false,
        ],

で、「‘app/private’」→「‘app’」にしたらエラーはなくなりました。