[Dúvida] Criar visualização de arquivo com Laravel Livewire

Oii Jonatas, tudo bem?

Vou te dar uma ideia do que você pode fazer, tudo bem?

Para visualizar arquivos de imagem e PDF, você precisará de uma maneira de carregar esses arquivos no frontend de maneira eficiente. No Livewire, você pode fazer isso utilizando a propriedade de file uploads combinada com a visualização em tempo real.

Um exemplo básico de como você pode começar:

1. Upload de Arquivos: Primeiro, você precisa criar um componente Livewire para o upload e a visualização dos arquivos.

// Em app/Http/Livewire/FileViewer.php
namespace App\Http\Livewire;

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

class FileViewer extends Component
{
    use WithFileUploads;

    public $file;

    public function render()
    {
        return view('livewire.file-viewer');
    }

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

        $path = $this->file->store('public/files');
        $this->emit('fileUploaded', $path);
    }
}

1. Visualização de Arquivos: No frontend, você pode exibir o arquivo dependendo do tipo. Para imagens e PDFs, você pode usar elementos HTML adequados.

<!-- Em resources/views/livewire/file-viewer.blade.php -->
<div>
    <input type="file" wire:model="file">
    <button wire:click="save">Upload</button>

    @if ($file)
        @if (in_array($file->extension(), ['png', 'jpg', 'jpeg', 'gif']))
            <img src="{{ $file->temporaryUrl() }}" alt="Preview Image">
        @elseif ($file->extension() === 'pdf')
            <iframe src="{{ $file->temporaryUrl() }}" style="width:100%;height:600px;"></iframe>
        @endif
    @endif
</div>

1. Integração com o Banco de Dados: Lembre de salvar o caminho do arquivo no banco de dados após o upload, para que você possa recuperá-lo posteriormente para visualização.

Este é apenas um exemplo básico para começar. Você pode precisar ajustar o código para atender às especificidades do seu projeto, como manipulação de diferentes tipos de arquivos, segurança dos arquivos armazenados, entre outros.

Um abraço e bons estudos.