laravel gallery managements – How to upload image in Laravel and store in database?

In this laravel gallery managements posts, We are going to share with you how to make bootstrap laravel gallery managements with validation and fancybox in laravel 9, laravel 8, laravel 7, laravel 6 and laravel 5 web application.

laravel gallery managements – Image Gallery CRUD example from scratch

In this laravel gallery managements example i created “gallery_managements” table with main ‘title’ and ‘image’ columns. We created single controller and view file for display form and error messages, validation etc. And then complete this example you will display layout:

Step 1 : Install Laravel Application

composer create-project --prefer-dist laravel/laravel blog

Step 2: Database Configuration

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=gallery_art
DB_USERNAME=root
[email protected]#$%[email protected]#[email protected]$%^

Step 3: Create GalleryManagements Table and Model

php artisan make:migration create_gallery_managements_table

<?php


use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;


class CreateGalleryManagementsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('gallery_managements', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('image');
            $table->timestamps();
        });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('gallery_managements');
    }
}

php artisan make:model GalleryManagements

app/GalleryManagements.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;


class GalleryManagements extends Model
{
    protected $table = 'gallery_managements';


    protected $fillable = ['title','image'];
}

Step 4: Create Route

routes/web.php

Route::get('gallery-managements', '[email protected]');
Route::post('gallery-managements', '[email protected]');
Route::delete('gallery-managements/{id}', '[email protected]');

Step 5: Create Controller

php artisan make:controller GalleryManagementsController

So, let’s copy bellow code and put on GalleryManagementsController.php file.
app/Http/Controllers/ContactUSController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use App\GalleryManagements;


class GalleryManagementsController extends Controller
{


    /**
     * Listing Of images gallery
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
    	$images = GalleryManagements::get();
    	return view('gallery-managements',compact('images'));
    }


    /**
     * Upload image function
     *
     * @return \Illuminate\Http\Response
     */
    public function upload(Request $request)
    {
    	$this->validate($request, [
    		'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);


        $input['image'] = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('images'), $input['image']);


        $input['title'] = $request->title;
        GalleryManagements::create($input);


    	return back()
    		->with('success','Image Uploaded successfully.');
    }


    /**
     * Remove Image function
     *
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
    	GalleryManagements::find($id)->delete();
    	return back()
    		->with('success','Image removed successfully.');	
    }
}

Step 6: Create View

resources/views/gallery-managements.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel gallery managements - www.pakainfo.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>


    <style type="text/css">
    .gallery
    {
        display: inline-block;
        margin-top: 20px;
    }
    .close-icon{
    	border-radius: 50%;
        position: absolute;
        right: 5px;
        top: -10px;
        padding: 5px 8px;
    }
    .form-image-upload{
        background: #e8e8e8 none repeat scroll 0 0;
        padding: 15px;
    }
    </style>
</head>
<body>


<div class="container">


    <h3>Laravel - Image Gallery CRUD Example</h3>
    <form action="{{ url('gallery-managements') }}" class="form-image-upload" method="POST" enctype="multipart/form-data">


        {!! csrf_field() !!}


        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif


        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">Γ—</button>
                <strong>{{ $message }}</strong>
        </div>
        @endif


        <div class="row">
            <div class="col-md-5">
                <strong>Title:</strong>
                <input type="text" name="title" class="form-control" placeholder="Title">
            </div>
            <div class="col-md-5">
                <strong>Image:</strong>
                <input type="file" name="image" class="form-control">
            </div>
            <div class="col-md-2">
                <br/>
                <button type="submit" class="btn btn-success">Upload</button>
            </div>
        </div>


    </form> 


    <div class="row">
    <div class='list-group gallery'>


            @if($images->count())
                @foreach($images as $image)
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="/images/{{ $image->image }}">
                        <img class="img-responsive" alt="" src="/images/{{ $image->image }}" />
                        <div class='text-center'>
                            <small class='text-muted'>{{ $image->title }}</small>
                        </div> <!-- text-center / end -->
                    </a>
                    <form action="{{ url('gallery-managements',$image->id) }}" method="POST">
                    <input type="hidden" name="_method" value="delete">
                    {!! csrf_field() !!}
                    <button type="submit" class="close-icon btn btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
                    </form>
                </div> 
                @endforeach
            @endif


        </div> 
    </div> 
</div> 


</body>


<script type="text/javascript">
    $(document).ready(function(){
        $(".fancybox").fancybox({
            openEffect: "none",
            closeEffect: "none"
        });
    });
</script>
</html>

Now you can open bellow URL on your browser and run laravel gallery managements:

Free Live Chat for Any Issue

run this Example : https://laravel.com/docs/9.x/validation#rule-image

http://localhost:8000/gallery-managements

5/5 - (1 vote)