[SOLVED]Trying to add Profile Picture In NavBar, Ended up with Undefined Variable Error | Laravel | Page 1

steady lichen Jan 16, 2023, 4:52 PM

#

Edit: Added view code

Hey everyone, Can someone assist me with this problem?

// Start

WEB Code:

Route::get('/', [CatinController::class, 'home']);

Controller Code (CatinController):

public function home(Catin $catin) {
        return view('home', [
            'catins' => $catin
        ]);
    }

Home View Code:

<x-layout-home>
    @include('partials._hero')
</x-layout-home>

Component "layout-home" Code:

<body class="mb-48">
    
    {{-- Navbar Component --}}
    <x-navbar :catins="$catins" />

    {{-- View Output --}}

    <main>
        
        {{$slot}}
    </main>

    <footer class="fixed bottom-0 left-0 w-full flex items-center justify-start font-bold bg-footer text-white h-24 mt-24 md:justify-center">
        <p class="ml-2">Work in progress (WIP)</p>

            <a
                href="/catins/create"
                class="border border-white absolute top-1/3 right-10 bg-black text-white py-2 px-5"
                >
                <i class="fa-solid fa-plus"></i> Tambah data calon pengantin 
                </a
            >
    </footer>

    <x-flash-message />
</body>
</html>

"Navbar" Component Code:

@props(['catins'])

                {{-- Error --}}
                src="{{$catins->image ? asset('storage/' . $catins->image) : asset('/images/profile/no-image.jpg')}}" 
                alt="Rounded avatar">
            </li>

MySQL table in the picture
// End

Any idea what's the issue? Previously I'm using auth()->user()->image because it's using the laravel default "User" Table, but it ended up throwing an error. And now i'm trying it by using props but still throws an error

brisk tundra Jan 16, 2023, 4:55 PM

#

What error is it throwing?

steady lichen Jan 16, 2023, 4:56 PM

#

Undefined variable $catins

brisk tundra Jan 16, 2023, 4:57 PM

#

Route::get('/', [CatinController::class, 'home']);

public function home(Catin $catin) {
        return view('home', [
            'catins' => $catin
        ]);
    }

#

Where are you passing $catin here?

#

I don't know what a catin is, but your route isn't setting it at all to anything.

#

Is catin supposed to be the currently active user?

steady lichen Jan 16, 2023, 4:59 PM

#

Oh wait my mistake im using a different model, should have been the user model

brisk tundra Jan 16, 2023, 5:01 PM

#

Even if you change to user model, you still aren't passing a user to the route itself. If you're intending to pass a user by id, your route should be

Route::get('/{user}', [CatinController::class, 'home']);

and you pass the user id.

If you mean to get the currently active user, do this..

public function home() {
        return view('home', [
            'catins' => request()->user(),
        ]);
    }

steady lichen Jan 16, 2023, 5:03 PM

#

I'm trying to pass the image from the user table

brisk tundra Jan 16, 2023, 5:03 PM

#

For the currently active user?

#

Try the second option then that I posted above.

steady lichen Jan 16, 2023, 5:04 PM

#

brisk tundra For the currently active user?

yes

brisk tundra Jan 16, 2023, 5:05 PM

#

request()->user() will grab the active user for the current request.

steady lichen Jan 16, 2023, 5:14 PM

#

undefined variable ''$users" (Changed the variable to users). Okay so home view uses wrapper components called layout-home. Does the passed data doesn't pass to the component?

brisk tundra Jan 16, 2023, 5:15 PM

#

<x-layout-home>
    @include('partials._hero')
</x-layout-home>

#

You might need to pass $users here.

steady lichen Jan 16, 2023, 5:16 PM

#

<x-layout-home :users="$users">
    @include('partials._hero')
</x-layout-home>

Like this, right?

brisk tundra Jan 16, 2023, 5:17 PM

#

That should work, yeah.

#

Iirc

steady lichen Jan 16, 2023, 5:27 PM

#

The home page works, i can access it, but when i tried to go to the register page in the navbar, it throws "Undefined variable $users". Dump die the home page and got this.

#

dd($users)

brisk tundra Jan 16, 2023, 5:30 PM

#

Are you passing users in the register route?

steady lichen Jan 16, 2023, 5:32 PM

#

Not yet, ill passed it

#

okay now can access the register page

#

I have so many routes, is there any other way, a quicker way rather than copy pasted it on the routes?

brisk tundra Jan 16, 2023, 5:35 PM

#

You could probably adjust your navbar to be like

#

@auth
   <img src="{{ request()->user()->image? asset('storage/' request()->user()->image) : asset('/images/profile/no-image.jpg') }} alt="Rounded Avatar">
@endauth

#

Instead of passing user down from the controller

#

@auth means only do this if an authenticated user is set.

#

Or

steady lichen Jan 16, 2023, 5:39 PM

#

nice, ill try that

brisk tundra Jan 16, 2023, 5:39 PM

#

@auth
   <img src="{{ auth()->user()->image? asset('storage/' auth()->user()->image) : asset('/images/profile/no-image.jpg') }} alt="Rounded Avatar">
@endauth

#

If you prefer auth()->user() over request()->user()

steady lichen Jan 16, 2023, 5:40 PM

#

Okay if i do that, then no need to use props right?

brisk tundra Jan 16, 2023, 5:41 PM

#

Yeah.

steady lichen Jan 16, 2023, 5:48 PM

#

Hmm now it can't save the image that i'm submitting. It saved the other data though

#

oh also the navbar works, only it's displaying the no image one

#

Register form code (image part):

<form method="POST" action="/users/store" enctype="multipart/form-data">

@csrf

<div class="mb-6">

<label for="image" class="inline-block text-lg mb-2">
  Profile Picture
</label>

<input
type="file"
class="border border-gray-200 rounded p-2 w-full"
name="image"
/>

@error('image')
<p class="text-red-500 text-xs mt-1">{{$message}}</p>
@enderror

</div>
</form>

brisk tundra Jan 16, 2023, 5:54 PM

#

Can you show your store function?

#

And show your navbar code

steady lichen Jan 16, 2023, 5:57 PM

#

Store function code:

public function store(Request $request) {
        $formFields = $request->validate([
            'name' => ['required', 'min:3'],
            'image' => 'required',
            'email' => ['required', 'email', Rule::unique('users', 'email')],

            'password' => ['required','confirmed', 'min:3']
        ]);
        
        // Hashing password
        $formFields['password'] =   
bcrypt($formFields['password']);

        // Create User
        $user = User::create($formFields);

        // Login
        auth()->login($user);

        return redirect('/catins/index')->with('message', 'Berhasil Register');
    }

#

Navbar Code:

<nav class="bg-elsimil flex justify-between items-center">
    <a href="/">
        <img class="w-24" src="{{asset('images/elsimil-logo.jpg')}}" alt="" class="logo"/> 
    </a>

    <ul class="flex space-x-6 mr-6 text-lg">

        {{-- @auth = only logged in user can access it --}}
        @auth
            <li>
                <img 
                class="border-2 -translate-y-1 border-white w-10 h-10 rounded-full" 

                src="{{request()->user()->image ? asset('storage/' . request()->user()->image) : asset('/images/profile/no-image.jpg')}}" 
                alt="Rounded avatar">
            </li>
            <li>
                <span class="text-white font-bold uppercase">
                    Welcome {{auth()->user()->name}}
                </span>
            </li>
            <li>
                <a href="/catins/manage" class="text-gray-300 hover:text-white"
                    ><i class="fa-solid fa-gear"></i>
                    Manage Listings</a
                >
            </li>
            <li>
                <form class="inline text-gray-300 hover:text-white" method="POST" action="/users/logout">
                    @csrf
                    <button type="submit">
                        <i class="fa-solid fa-door-closed"></i> Logout
                    </button>
                </form>
            </li>
        @else
            <li>
                <a href="/register" class="text-gray-300 hover:text-white"
                    ><i class="fa-solid fa-user-plus"></i> Register</a
                >
            </li>
            <li>
                <a href="/login" class="text-gray-300 hover:text-white"
                    ><i class="fa-solid fa-arrow-right-to-bracket"></i>
                    Login</a
                >
            </li>
        @endauth
    </ul>   
</nav>

#

Okay, so I've added this line of code after the validation rules:

if($request->hasFile('image')) {
  $formFields['image'] = $request->file('image')->
store('profiles', 'public');
        }

brisk tundra Jan 16, 2023, 6:13 PM

#

Did that fix your storing issue?

steady lichen Jan 16, 2023, 6:15 PM

#

After i added that, my profile pictures can be saved at the storage->profiles path, but in the mysql table it doesn't save the path.

#

#

#

Still null

brisk tundra Jan 16, 2023, 6:17 PM

#

Do you have image in your fillables array for the user class?

steady lichen Jan 16, 2023, 6:23 PM

#

This one right? Nope

    protected $fillable = [
        'name',
        'email',
        'password',
    ];

#

okay ill add it

#

Yes finally it works, thank you so much!

#

brisk tundra Jan 16, 2023, 6:28 PM

#

👍

#[SOLVED]Trying to add Profile Picture In NavBar, Ended up with Undefined Variable Error