Posted on by MariaJose

Laravel Livewire: Tutorial de carga de archivos

laravel livewire

Laravel Livewire: Tutorial de carga de archivos

  • Explicaré paso a paso la carga de archivos de Laravel Livewire tutorial.
  • Podrá ver el ejemplo de carga del archivo Laravel Livewire.
  • Le ayudaremos a dar un ejemplo de carga de archivos con Laravel Livewire.
  • Usaremos el archivo de carga de la tienda laravel livewire.

En este tutorial, crearemos un ejemplo simple de carga de archivos usando laravel livewire. puede usar Laravel Livewire con las versiones de Laravel 6, Laravel 7 y Laravel 8.

Livewire es un marco de pila completo para el marco de Laravel que simplifica la construcción de interfaces dinámicas, sin dejar la comodidad de Laravel. Si está usando Livewire con Laravel, entonces despreocúpese por escribir código jquery ajax, Livewire le ayudará a escribir código jquery ajax de forma muy simple usando PHP. Sin actualización de página, la validación de laravel funcionará, el formulario se enviará, etc.

Aquí, le daré un ejemplo muy simple de cómo crear un formulario de carga de archivos con título y nombre y almacenaré esos datos en la base de datos sin actualizar la página y sin demasiadas líneas de código en el archivo blade. Usaremos solo el paquete livewire / livewire.

Paso 1: Instale Laravel 8

En primer lugar, necesitamos obtener una nueva aplicación de la versión Laravel 8 usando el siguiente comando, así que abra su terminal O el símbolo del sistema y ejecute el siguiente comando:

composer create-project --prefer-dist laravel/laravel blog

Paso 2: Crear la migración y el modelo

Aquí necesitamos crear una migración de base de datos para la tabla de archivos y también, crearemos un modelo para la tabla de archivos.

php artisan make:migration create_files_table

Migración:

<?php

use 
Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateFilesTable extends Migration

{

public function up()

{

Schema::create('files', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->string('name');

$table->timestamps();

});

}

public function down()

{

Schema::dropIfExists('files');

}

}

Emigrar:

php artisan migrate

Ahora crearemos un modelo de Archivo usando el siguiente comando:

php artisan make: modelo de archivo

App/Models/File.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class File extends Model

{

use HasFactory;

protected $fillable = [

'title','name'

];

}

Paso 3: Instale Livewire

Ahora en este paso, simplemente instalaremos livewire en nuestra aplicación laravel 8 usando el siguiente comando:

composer require livewire/livewire

Paso 4: Crear componente

Ahora aquí crearemos un componente Livewire usando su comando. Así que ejecute el siguiente comando para crear un componente de formulario de carga de archivos.

php artisan make:livewire file-upload

Ahora crearon archivos en ambas rutas:

app/Http/Livewire/FileUpload.php

resources/views/livewire/file-upload.blade.php

Ahora actualizaremos ambos archivos como se muestra a continuación para nuestro formulario de contacto.

app/Http/Livewire/FileUpload.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\File;

class FileUpload extends Component

{

use WithFileUploads;

public $file, $title;

public function submit()

{

$validatedData = $this->validate([

'title' => 'required',

'file' => 'required',

]);

$validatedData['name'] = $this->file->store('files', 'public');

File::create($validatedData);

session()->flash('message', 'File successfully Uploaded.');

}

public function render()

{

return view('livewire.file-upload');

}

}

resources/views/livewire/file-upload.blade.php

<form wire:submit.prevent="submit" enctype="multipart/form-data">

<div>

@if(session()->has('message'))

<div class="alert alert-success">

{{ session('message') }}

</div>

@endif

</div>

<div class="form-group">

<label for="exampleInputName">Title:</label>

<input type="text" class="form-control" id="exampleInputName" placeholder="Enter title" wire:model="title">

@error('title') <span class="text-danger">{{ $message }}</span> @enderror

</div>

<div class="form-group">

<label for="exampleInputName">File:</label>

<input type="file" class="form-control" id="exampleInputName" wire:model="file">

@error('name') <span class="text-danger">{{ $message }}</span> @enderror

</div>

<button type="submit" class="btn btn-success">Save</button>

</form>

Paso 5: Crear ruta

Ahora crearemos una ruta para llamar a nuestro ejemplo, así que agreguemos una nueva ruta al archivo web.php como se muestra a continuación:

Route::get('file-upload', function () {

return view('default');

});

Paso 6: Crear archivo de vista

Aquí, crearemos un archivo blade para la ruta del formulario de llamada. en este archivo, usaremos @livewireStyles, @livewireScripts y @livewire (“formulario de contacto”). así que añádalo.

resources/views/default.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Livewire Example - raviyatechnical</title>

@livewireStyles

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="card">

<div class="card-header">

Laravel Livewire Example - raviyatechnical

</div>

<div class="card-body">

@livewire('file-upload')

</div>

</div>

</div>

</body>

@livewireScripts

</html>

Ahora puede ejecutar usando el siguiente comando:

php artisan serve

Abrir debajo de la URL:

http://localhost:8000/file-upload

Recent Post