Avatars Components

Overview

This implementation guide is for the UserAvatarTailwind component, a Laravel Livewire component that allows users to upload, change, and display their avatar. The component utilizes the Livewire's file uploads feature and integrates directly with Laravel's authentication system.

Implementation Instructions

1. Copy the UserAvatarTailwind.php component file to your app/Livewire directory.

It should look something like this:

app/Livewire/UserAvatarTailwind.php

2. Copy the user-avatar-tailwind.blade.php view file to your resources/views/livewire directory.

It should look something like this:

resources/views/livewire/user-avatar-tailwind.blade.php

Integration

To use the UserAvatarTailwind component in a Laravel blade view, use the following Livewire component directive:

@livewire('user-avatar-tailwind')

Usage Instructions

The UserAvatarTailwind component automatically handles file uploads when a file is selected in the 'Change Avatar' input field. The uploaded file is stored in an S3 bucket named 's3-avatars' and the user's avatar URL in the database is updated. The component re-renders to display the new avatar.

Customization

The UserAvatarTailwind component can be customized by modifying the updatedAvatar() method in the component class. For example, you may change the storage disk, the upload directory, or the alert message.

For customization of the visual elements, you can modify the user-avatar-tailwind.blade.php view file. This file uses Tailwind CSS classes, but you can replace them with your own CSS or other CSS frameworks as needed.

Overview

This component enables users to upload and update their avatar images. Key features include image upload, automatic saving of the uploaded image to an Amazon S3 bucket, and live-updating of the user interface to reflect the new avatar.

Installation

Follow these steps to implement the UserAvatar component:

• Copy the UserAvatar.php file to your app/Livewire directory.
• Copy the user-avatar.blade.php file to your resources/views/livewire directory.

Remember to adjust the namespace in the UserAvatar.php file to match the directory where you placed it. For instance, if you placed the file directly under the app/Livewire directory, the namespace should be namespace App\Livewire;.

Integration

Integrate the UserAvatar component into your Laravel project by adding the following line to the Blade file where you want the component to appear:

@livewire('user-avatar')

Usage

The UserAvatar component is now ready to use. When a user selects a new avatar image, the component will automatically upload and save the image to the specified S3 bucket, and update the user interface.

Configuration

You can customize the UserAvatar component in several ways:

• Change the S3 bucket where avatars are stored by modifying the 's3-avatars' parameter in the store() method.
• Customize the success alert message by modifying the 'Avatar Saved !' string in the dispatch() method.
• Modify the image file types accepted by the input field in the Blade view by changing the accept="image/png, image/jpeg" attribute.