How To CRUD Operation With Image Using html jquery PHP and MySQLi laravel

How To CRUD Operation With Image Using html jquery PHP and MySQLi laravel

how to implement CRUD operations with images using HTML, jQuery, PHP, MySQLi, and Laravel.

1. HTML Form (create.blade.php):

html
<form id="imageForm" enctype="multipart/form-data">
    <input type="file" name="image" id="image">
    <button type="submit" id="uploadBtn">Upload Image</button>
</form>
<div id="imagePreview"></div>

2. jQuery for Image Preview and Upload:

javascript
$(document).ready(function(){
    $('#image').change(function(){
        var file = $(this)[0].files[0];
        var reader = new FileReader();
        reader.onload = function(e){
            $('#imagePreview').html('<img src="'+e.target.result+'" alt="Preview">');
        }
        reader.readAsDataURL(file);
    });

    $('#imageForm').submit(function(e){
        e.preventDefault();
        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'upload.php', // or your Laravel route
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response){
                alert('Image uploaded successfully.');
                $('#imagePreview').html('');
                $('#image').val('');
            }
        });
    });
});

3. PHP (upload.php) to handle image upload:

php
<?php
if(isset($_FILES['image'])){
    $errors= array();
    $file_name = $_FILES['image']['name'];
    $file_tmp = $_FILES['image']['tmp_name'];
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
    
    $extensions= array("jpeg","jpg","png");
    
    if(in_array($file_ext,$extensions)=== false){
        $errors[]="extension not allowed, please choose a JPEG or PNG file.";
    }
    
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo "Success";
    }else{
        print_r($errors);
    }
}
?>

4. Laravel Controller for CRUD operations:

Assuming you have a model named Image and its corresponding controller.

php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class ImageController extends Controller
{
    public function store(Request $request)
    {
        // Handle image upload and storage here
        // You can use Laravel's file storage functionality or any other preferred method
    }

    public function update(Request $request, $id)
    {
        // Handle image update here
    }

    public function destroy($id)
    {
        // Handle image deletion here
    }
}

Remember to set up your routes and adjust the code according to your specific project structure and requirements. Additionally, make sure to handle validations and security measures appropriately.