DEV Community: Ridwan Kasim

Working with multiple image select in Laravel Livewire

Ridwan Kasim — Sat, 09 Nov 2024 20:49:04 +0000

In this article, I am going to show you a simple idea to fix the loss of previously selected image/images whenever you want to select more images using livewire with laravel.

I know there are several ways to achieve this but I find this method very easy with the help of some livewire lifecycle hooks which are the

Updating and the Updated hooks.

This screenshot shows the full code needed by your livewire component class

Let's start by looking at what Updating and Updated hooks do. Then, I will explain the codes in the above screenshot step by step.

Updating:

This runs before any update to the Livewire component's data is completed.

Updated:

This runs after any update to the Livewire component's data is completed.

The code explanation goes thus:

First, add the WithFileUploads trait to your component. Then declare the following properties

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;

class Create extends Component {
  use WithFileUploads;
  public $images = [], $prevImages;
}

In your blade template, add an input tag with a type of file and set the model name as images like this:

<input type="file" wire:model="images" multiple accept="image/jpg,image/jpeg,image/png" />

So if you attempt to select multiple images, Livewire will handle it and render the image for you and you can add a preview by using the code below:

<div class="w-full">
         @if (!empty($images))
                 @foreach ($images as $key => $image)
                      <div class="relative float-left pt-[10px] pl-[15px] pr-[10px] pb-[0px] h-[150px] mb-8">
                          <a class="absolute bg-[#ddd] p-[8px] right-[25px] top-[20%] rounded-[50%]" wire:click.prevent='removeItem({{ json_encode($key) }})'>
                                 <i class="fa fa-trash text-red-600"></i>
                          </a>
                         <img src="{{ $image->temporaryUrl() }}" alt="" class="w-[150px] h-[150px] rounded-[15px]" />
                      </div>
                  @endforeach
         @endif
</div>

The problem with the above code is that anytime you click on the input tag to select a new set of files, the previously selected one(s) is lost during the process. Here is the quick fix I provided using two of the lifecycle hooks in Livewire.

The first one is the updatingImages method. See the code sample below:

public function updatingImages($value) {
    $this->prevImages = $this->images;
}

The above code is simply storing the content of the images property in $prevImages property while the $images property is about to start updating so as to prevent loss of content.

The second one is the updatedImages method. See the code sample below:

public function updatedImages($value) {
    $this->images = array_merge($this->prevImages, $value);
}

The above code merges the data of the $prevImages property with the data of the newly selected image/images then stores it back into the $images property after the update is complete.

This is one of the simplest ways of solving the issue stated at the beginning of this article. I hope you find it helpful.

Thank you for reading!!!

Realtime logging in Laravel using Slack

Ridwan Kasim — Mon, 11 Sep 2023 08:00:00 +0000

To help developers know what is going on within their application, Laravel provides robust logging services that allow you to log messages to files, the system error log, and various other destinations.

In this tutorial, I will cover the following:

Introduction to logging
Overview of the Laravel log configuration file
Setting up slack for real-time logging.

Introduction to logging

Logging in Laravel is channel-based, and each channel defines a specific way of writing log messages. For example, the single channel writes log files to a single log file, while the daily channel writes log to file based on date e.g. laravel-2023-01-09.log, and the slack channel sends log messages to Slack.

There are several cool packages that help to visualize our logs like ARCANEDEV/LogViewer, rap2hpoutre/laravel-log-viewer, and opcodesio/log-viewer

Also, you can check my previous article send logs to telegram where I covered how to set up a telegram bot to handle our application log.

Overview of Laravel Log Configuration file

Laravel provides you with great configuration flexibility which is housed in the config/logging.php file. This file allows you to configure your application's log channels, so let's take a look at the default file below:

<?php

use Monolog\Handler\NullHandler;
use Monolog\Handler\StreamHandler;
use Monolog\Handler\SyslogUdpHandler;

return [

    'default' => env('LOG_CHANNEL', 'stack'),

    'deprecations' => [
        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
        'trace' => false,
    ],

    'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['single'],
            'ignore_exceptions' => false,
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'days' => 14,
        ],

        'slack' => [
            'driver' => 'slack',
            'url' => env('LOG_SLACK_WEBHOOK_URL'),
            'username' => 'Laravel Log',
            'emoji' => ':boom:',
            'level' => env('LOG_LEVEL', 'critical'),
        ],

        'papertrail' => [
            'driver' => 'monolog',
            'level' => env('LOG_LEVEL', 'debug'),
            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
            'handler_with' => [
                'host' => env('PAPERTRAIL_URL'),
                'port' => env('PAPERTRAIL_PORT'),
                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
            ],
        ],

        'stderr' => [
            'driver' => 'monolog',
            'level' => env('LOG_LEVEL', 'debug'),
            'handler' => StreamHandler::class,
            'formatter' => env('LOG_STDERR_FORMATTER'),
            'with' => [
                'stream' => 'php://stderr',
            ],
        ],

        'syslog' => [
            'driver' => 'syslog',
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'errorlog' => [
            'driver' => 'errorlog',
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'null' => [
            'driver' => 'monolog',
            'handler' => NullHandler::class,
        ],

        'emergency' => [
            'path' => storage_path('logs/laravel.log'),
        ],
    ],

];

From the config file, you can see different options available for use. Let's review a few of these options and what they do. We will use the daily option.

'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'days' => 14,
        ],

driver: This tells laravel the driver to use.
path: This tells Laravel where to write the logs to.
level: This tells Laravel the type of log to be handled by this channel. It can be debug, critical, warning etc.
days: The days option tells Laravel how long the log should be retained before deleting.
You can read more about logging from the official documentation.

Setting up Slack for Logging

Let's proceed by creating an app on Slack. Click on the Create New App button and select the first option as seen in the image below.

Fill in the app name, select a workspace for the app and click the create app button to save the form.

Now that our app has been created, select the incoming webhooks option and activate the toggle on the next screen shown to you.

Scroll down to the bottom of the page and click on Add New Webhook to Workspace. On the next screen shown to you, select a channel and click on Allow

Slack will now generate a webhook URL for us. Copy it, head over to your .env file and add it to your app like below.

LOG_SLACK_WEBHOOK_URL=https://hooks.slack.com/services/xxxxxxxxxx

Open up the logging.php file then under channels array, since the default is set to stack, let's change the channels to slack from single and save the file.

'stack' => [
            'driver' => 'stack',
            'channels' => ['slack'],
            'ignore_exceptions' => false,
],

Let's test it out by opening up Tinker and run the command below:

info("This is just a tutorial demo logging");

Voila!!!

Wrapping up

In this article, you have learned about logging in to Laravel and how to set up Slack to receive your application logs in real time.

Don't forget to give me a shoutout on LinkedIn & Twitter

How to send application logs to Telegram in Laravel.

Ridwan Kasim — Sun, 08 Jan 2023 20:12:35 +0000

The Laravel framework has a robust logging system that allows you to send log messages to files, system logs, and various other destinations. Logging in Laravel is channel-based, and each channel defines a specific way of writing log messages. For example, the single channel writes log files to a single log file, while the daily channel writes log to file based on date e.g. laravel-2023-01-09.log, and the slack channel sends log messages to Slack.

Laravel logging is created on top of Monolog, which is a powerful logging library for PHP projects. In this guide, we will be looking at how to send our laravel logs to telegram channel with the help of the Telegram Bot API.

Prerequisites

You need to have the latest version of PHP and Composer installed on your computer. You should also create a new Laravel project so that you can test the code snippets in this article. You can consult Laravel's official documentation for details on creating a new project on your machine.

Let's start by creating a laravel project with the command below:

laravel new telegram-app

OR

composer create-project laravel/laravel telegram-app

Navigate to the project directory using the command below:

cd telegram-app

Let's open the project in VsCode using the command below:

code .

Exploring the logging config file

Laravel projects include a config directory containing several configuration files used to customize the project's different aspects, such as the database setup, caching, session management, and more. In addition, the configuration options related to logging are also present in this directory in the logging.php file. Go ahead and open this file in your editor to examine its contents:

<?php

use Monolog\Handler\NullHandler;
use Monolog\Handler\StreamHandler;
use Monolog\Handler\SyslogUdpHandler;

return [

    'default' => env('LOG_CHANNEL', 'stack'),

    'deprecations' => [
        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
        'trace' => false,
    ],

    'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['single'],
            'ignore_exceptions' => false,
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'days' => 14,
        ],

        'slack' => [
            'driver' => 'slack',
            'url' => env('LOG_SLACK_WEBHOOK_URL'),
            'username' => 'Laravel Log',
            'emoji' => ':boom:',
            'level' => env('LOG_LEVEL', 'critical'),
        ],
        ...
     ]
];

As we can see, there are several options in the channel array which can be used to customize the logging aspect of our project. Let's proceed by setting up our Telegram channel and creating a Bot through BotFather. Open the link in your browser and start the conversation by sending the message /start. You should receive a message with the next steps to creating your bot.

Click /newbot and choose a name & a username for your bot. The bot will generate your API token for you as seen in the image below.

We will now proceed to create a new channel LaravelDemoLogging and add our new bot DemoLoggingBot to it.

We need to change the channel type to public. Click the channel info and edit the channel type and set it to public. Also, set the channel username which we are going to use in our laravel project along with the API token.

Next, let's open the .env file and the following variables:

TELEGRAM_API_KEY="your-api-key"
TELEGRAM_CHANNEL="@laraveldemologging"

Note: the channel must have a @ prefix when setting it in the .env file.

Open the logging.php file and add a new channel after the stack array and it to the channels like so:

'stack' => [
            'driver' => 'stack',
            'channels' => ['single', 'telegram'],
            'ignore_exceptions' => false,
],
"telegram" => [
            'driver'  => 'monolog',
            'handler' => FilterHandler::class,
            'level' => env('LOG_LEVEL', 'debug'),
            'with' => [
                'handler' => new TelegramBotHandler($apiKey = env('TELEGRAM_API_KEY'), $channel = env('TELEGRAM_CHANNEL'))

            ]
],

Next, add the handlers used within the telegram array to the top of the file like so:

use Monolog\Handler\FilterHandler;
use Monolog\Handler\TelegramBotHandler;

Let's start Laravel tinker from the terminal then log something:

info("This is a demo log");

Wrapping up

In this article, you have learned about logging in Laravel and how to setup a telegram channel & bot to receive your application logs in realtime.

Don't forget to give me a shoutout on LinkedIn & Twitter

Keep learning and happy coding!!!

How to use Camera Preview plugin in Ionic with Capacitor v3

Ridwan Kasim — Fri, 04 Mar 2022 06:19:14 +0000

In this article, we will be looking at how to make use of the Camera Preview Plugin in our ionic apps. This plugin doesn't cause your app to restart whenever the camera is launched unlike the Camera Plugin. Research shows that the issue will occur when the device running the app is on low memory.

Before we get started, make sure you have your development environment set up for ionic else follow the official documentation
Let's start by creating a blank ionic project:

ionic start camera-preview blank

Select Angular from the options and wait for some minutes while the project is created.

Navigate to the project directory by running the command below:

cd camera-preview

We can now install our camera preview plugin with this command:

npm install @capacitor-community/camera-preview

Then build the project and synchronise the changes by running the command below:

ionic build && npx cap sync

Launch the app by running the command below. This will open the project in your browser.

ionic serve

Open the newly created project in your favourite code editor. Also, we need to generate one more page component to render our camera.

ionic generate page preview

In our project directory, we will now have a folder for home & another for preview. So let's open the home.page.html and add a button to launch the camera.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Camera Preview Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <div *ngIf="image">
        <img [src]="image" alt="" srcset="">
    </div>
    <ion-button (click)="openCamera()" color="primary" expand="block" fill="solid" size="default">
       Open Camera
    </ion-button>
</ion-content>

The next thing to do is to register the preview module in our app.module.ts file. Your app.module.ts should look like below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PreviewPageModule } from "./preview/preview.module";

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    PreviewPageModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

Let's open the home.page.ts file and add the code for the openCamera() method.

Import the ionic modal and the preview page.

import { ModalController } from '@ionic/angular';
import { PreviewPage } from '../preview/preview.page';

Then inject the modal into the constructor.

constructor(private modal: ModalController) {}

All is set and we can now implement the function to launch our camera in the preview modal.

async openCamera() {
    const modal = await this.modal.create({
        component: PreviewPage,
        cssClass: '',
        animated: true
    });
    return await modal.present();
}

Let's implement the look and feel of the camera by opening our preview.page.html and the code below:

<ion-content id="content" [fullscreen]="true">
  <div *ngIf="cameraActive">
      <ion-button (click)="stopCamera()" expand="block" id="close">
          <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>

      <ion-button (click)="takePicture()" expand="block" id="capture">
          <ion-icon slot="icon-only" name="camera"></ion-icon>
      </ion-button>

      <ion-button (click)="flipCamera()" expand="block" id="flip">
          <ion-icon slot="icon-only" name="repeat"></ion-icon>
      </ion-button>
  </div>
</ion-content>

The next thing is to add some styling to our buttons. Open preview.page.scss file and the code below:

ion-content {
  --background: transparent !important;
}

#capture {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  z-index: 99999;
}

#flip {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 125px);
  width: 50px;
  height: 50px;
  z-index: 99999;
}

#close {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 175px);
  width: 50px;
  height: 50px;
  z-index: 99999;
}

#capture::part(native) {
  border-radius: 30px;
}

#close::part(native) {
  border-radius: 30px;
}

#flip::part(native) {
  border-radius: 30px;
}

Let's open the preview.page.ts file and add it to our imports.

import { CameraPreview } from '@capacitor/core';
import { CameraPreviewOptions, CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
import '@capacitor-community/camera-preview';
import { ModalController } from '@ionic/angular';

Then inject the modal into the constructor. Also, we will declare two variables.

image = null;
cameraActive = false;
constructor(private modal: ModalController) {}

Since we are using a modal, we need to launch the camera on the device whenever the Open Camera button is clicked. Let's create a function called launchCamera() and call it inside ngOnInit()

ngOnInit() {
   this.launchCamera()
}

launchCamera() {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'front', // front or rear
      parent: 'content', // the id on the ion-content
      className: '',
      width: window.screen.width, //width of the camera display
      height: window.screen.height - 200, //height of the camera
      toBack: false,
    };
    CameraPreview.start(cameraPreviewOptions);
    this.cameraActive = true;
}

Let's create a function to take our picture. Once the picture is taken, we need to stop the camera and close the modal. The result is a base64 string which we will pass back when the modal is dismissed.

async takePicture() {
    const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
      quality: 90
    };
    const result = await CameraPreview.capture(cameraPreviewPictureOptions);
    this.image = `data:image/jpeg;base64,${result.value}`;
    this.stopCamera();
}

We need to add the function to stop the camera and close the modal.

async stopCamera() {
    await CameraPreview.stop();
    this.modal.dismiss(this.image);
}

We also need to add the function to switch the camera from front to back and vice versa.

Note: this won't work if you test it in a browser.

async flipCamera() {
   await CameraPreview.flip();
}

Let's open our home.page.ts file to listen to the modal close event. To do that we need to update the openCamera() function.

 modal.onDidDismiss().then((data) => {
     if (data !== null) {
        this.image = data.data;
     }
 });

Voila!!! Let's test it in the browser. You can find the full code here:

Setting up TailwindCSS v3 with Laravel v8.8.1 & later.

Ridwan Kasim — Mon, 31 Jan 2022 07:52:01 +0000

Tailwind is a popular utility-first CSS framework that helps developers build and design their products very fast without wasting much time.

In this article, we'll be looking at how to configure & set up tailwind in a laravel project.

Before moving along, make sure you have your development environment set up for Laravel.
Let's start by bootstrapping our laravel project with the command below:

laravel new sample-app

OR

composer create-project laravel/laravel sample-app

Navigate to the project directory by doing:

cd sample-app

Let's bring our project up with the command below from the terminal:

php artisan serve

The above command will start up our project and keep it running. You can access it through your favourite browser on http://127.0.0.1:8000

Now we can install tailwindcss in our already laravel project by doing:

npm install -D tailwindcss postcss autoprefixer

Then we create the config file:

npx tailwindcss init

You should see a message like the one in the image below

Now open the project in your favourite code editor and add the following to the tailwind.config.js file inside the content array.

'./resources/**/*.blade.php',
'./resources/**/*.js',

Now we need to tell Laravel to compile our Tailwind resources using Laravel Mix. Open the webpack.mix.js file in the root of our project & include tailwindcss as a postCss plugin as seen below:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss")
    ]);

Lastly, we need to import all @tailwindcss component layers into our project css. Open the resources/css/app.css file and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Voila! Configuration is done and you can watch for changes and compile assets in real-time during development.

npx mix watch

You should have something like the image below

Let's open our welcome.blade.php file and replace everything there with the code below to test our set up:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body class="bg-[#063970]">
    <div class="text-center mt-12">
        <h1 class="text-4xl text-white font-semibold">Welcome!!!</h1>
        <p class="text-xl text-white mt-4">This is a tailwind page</p>
    </div>
</body>
</html>

You should have a screen like the image below:

That's all you need to do in order to set up tailwindCSS in your laravel project.

Happy coding!

Ionic deeplink/universal link with Capacitor.

Ridwan Kasim — Sun, 22 Nov 2020 03:31:47 +0000

This article will assume you have already done the appropriate configurations for both android and ios but if you haven't then quickly check the steps here:

The code samples in this article will be strictly for Angular. Let's get started.

Open your app.component.ts file and import NgZone, Router from Angular, then App from Capacitor at the beginning of the file as seen below:

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { App } = Plugins;

Then, add Router and NgZone to the constructor as seen below:

constructor(private router: Router, private zone: NgZone) {
    this.initializeApp();
}

The next thing is to listen to the appUrlOpen event, and redirect when a deep link is found or matched.

initializeApp() {
    App.addListener('appUrlOpen', (data: any) => {
        this.zone.run(() => {
            // Example URL: https://example.com/signup?ref=1234           
            const slug = data.url.split("?")[0];
            if (slug == 'https://example.com/signup') {
                this.router.navigateByUrl('/signup');
            }
            // If there's no match do nothing
        });
    });
}

From the snippet above, data.url contains the original link that was clicked. But there's need to know what URL was returned by the appUrlOpen event so as to be able to handle redirects to the appropriate screen within your app. So we split the URL into parts by using the ? as the point of separation:

data.url.split("?")

The above line gives an array as seen below:

["http://example.com/signup", "ref=1234"]

So we assign the item with the zero index to slug:

const slug = data.url.split("?")[0];

Then check if it matches before performing a redirect:

if (slug == 'https://example.com/signup') {
     this.router.navigateByUrl('/signup');
}

The cool part is that using this technique, you can have other URLs like https://example.com/reset-password which should take your users to the password reset screen within your app. To do this, modify your code like this:

  // URL 1: https://example.com/signup?ref=1234
 //  URL 2: https://example.com/reset-password?email=test@gmail.com   
       const slug = data.url.split("?")[0];
       if (slug == 'https://example.com/signup') {
            this.router.navigateByUrl('/signup');
       } 
       else if (slug == 'https://example.com/reset-password') {
            this.router.navigateByUrl('/reset');
       }

Handling query params.

It is possible sometimes we are not just redirecting but we need to get the query params and use it within the app. Let's use the signup link https://example.com/signup?ref=1234 as an example. This can be done with the help of this regex expression which returns value of ref from the link:

    getQueryParams(params, url) {
        let reg = new RegExp('[?&]' + params + '=([^&#]*)', 'i');
        let queryString = reg.exec(url);
        return queryString ? queryString[1] : null;
    };

And we can use it like this:

let url = 'https://example.com/signup?ref=1234';
const params = this.getQueryParams('ref', url);
//params is 1234

That's it!!! I hope you had fun reading and learning from the article to continue the conversation you can follow me on Twitter: @oluwasheyii

Gracias!!!

Useful Ionic + Capacitor commands

Ridwan Kasim — Mon, 26 Oct 2020 18:47:01 +0000

Run app with live reload (Android)

ionic cap run android -l --external

Run app with live reload (iOS)

ionic cap run ios -l --external

How to generate a release APK without opening the android studio

ionic capacitor copy android --prod && cd android && ./gradlew assembleRelease && cd ..

How to generate a debug APK without opening the android studio

ionic capacitor copy android && cd android && ./gradlew assembleDebug && cd ..

How to generate icons & splash screen without specifying platform

cordova-res --skip-config --copy

How to build and run apk directly on the device from CLI

ionic capacitor copy android && cd android && ./gradlew assembleDebug && ./gradlew installDebug && cd ..

I will be updating this post with more useful commands. Thank you for reading!!!