DEV Community

Cover image for How to Redirect URL or Route using Laravel Livewire 3
Msh Sayket
Msh Sayket

Posted on

1

How to Redirect URL or Route using Laravel Livewire 3

In this post, I will show How to Redirect URL or Route using Laravel Livewire 3.

In this example, we will create a PhotoUpload Livewire component. This component will feature a form with a file input field and include image validation. The user can select an image, which will then be uploaded to the storage folder using the WithFileUploads trait. After upload image we will redirect route with flash message. You Can Learn How To Session Flash Messages in Laravel Livewire 3

How to Redirect URL or Route using Laravel Livewire 3 Example

Step 1: Create PhotoUpload Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.
php artisan make:livewire PhotoUpload
Now they created files on both paths:

app/Livewire/PhotoUpload.php

resources/views/livewire/photo-upload.blade.php
Enter fullscreen mode Exit fullscreen mode

Now, both files we will update as below for our contact us form.

app/Livewire/PhotoUpload.php

<?php

namespace App\Livewire;

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

class PhotoUpload extends Component
{
    use WithFileUploads;

    public $photo;

    public function render()
    {
        return view('livewire.photo-upload');
    }

    public function submit(){
        $this->validate([
            "photo" => "required|image"
        ]);

        $filepath = $this->photo->store("photos");

        $image = Image::create([
            "title" => "Test",
            "filepath" => $filepath
        ]);

        session()->flash("success", "Image uploaded successfully");

        return redirect()->route("home");
    }
}
Enter fullscreen mode Exit fullscreen mode

Read More

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay