Hey Artisan
Hope you are doing well. In this tutorial i am going to show you laravel 8 signature pad example. In this tutorial i am going to show you how we can create a signature pad and save it into public directory.
To do php laravel signature pad, i will use jQuery. It is pretty simple to use and create. You can easily use jquery ui signature pad and save this signature image using laravel into database.
In this tutorial i will use keith-wood jquery ui signature pad to create laravel jquery signature pad example. So let's start our signature pad example tutorial in laravel 8.
Preview:
Here is the following example of signature pad in laravel 8.
Step: 1 Create Route
To create routes, open the following directory and paste this code
routes/web.php
use Illuminate\Support\Facades\Route;
Route::get('/','SignatureController@index');
Route::post('/','SignatureController@upload')->name('signature');
Step: 2 Create SignatureController
In this step we will create SignatureController to handle the get and post request to save it into public directory.
app/Http/Controllers/SignatureController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SignatureController extends Controller
{
public function index()
{
return view('welcome');
}
public function upload(Request $request)
{
$folderPath = public_path('upload/');
$image_parts = explode(";base64,", $request->signed);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.'.$image_type;
file_put_contents($file, $image_base64);
return back()->with('success', 'success');
}
}
Step 3: Create blade file
In this step we have to create blade file to see our signature view. So let's create welcome.blade.php and paste this below code to create laravel jquery signature pad example.
Read also : Laravel 6 REST API with JWT Authentication
Now in the last step you have to create "upload" folder in the public folder. So let's create upload folder. Now if you open the root url then you can see the signature box. Now check it. Hope it will be helpful for you.
#laravel #laravel-6 #laravel-7 #keith-wood #jquery #signature-pad #example