Laravel Image Gallery: This module allows the admin to add/manage images into various galleries and galleries into various groups according to requirements. This is the best gallery module for the Bagisto platform and in this module, everything is configured by the admin
FileuploadController.php
// file upload
function more_upload_file(Request $request){
$name = time().'.'.request()->more_upload->getClientOriginalExtension();
$request->more_upload->move(public_path('uploads'), $name);
DB::table('file_upload')->insert([
'file' => $name
]);
return response()->json(['success'=>'Successfully uploaded.']);
}
// file fetch
function loadDatas(Request $req){
$filesArr = DB::table('file_upload')->get();
$filesArrCount = DB::table('file_upload')->count();
if($filesArrCount > 0){
foreach($filesArr as $filesAr){ ?>
<div class="col-lg-3 col-md-4 col-6">
<label for="picid<?php echo $filesAr->id; ?>" style="cursor:pointer;" class="d-block mb-4 h-100 pictures">
<img class="img-fluid img-thumbnail" src="<?php echo url('/').'/uploads/'.$filesAr->file; ?>" alt="" style="height:150px; width:100%">
</label>
<input type="radio" value="<?php echo $filesAr->id; ?>" name="pictures" id="picid<?php echo $filesAr->id; ?>" style="display:none;">
</div>
<script>
$(document).ready(function(){
$('.pictures').click(function(){
$('.pictures').css('border', 'none');
$(this).css('border', '1px solid red');
$('#select').removeClass('pointerDissable');
$('#select').css('background', 'green');
});
});
</script>
<?php }}else{
echo "<h3>No Records Found !</h3>";
}
}
Route::post('/more-upload-file', [FileuploadController::class, 'more_upload_file'])->name('more_upload_file');
Route::get('/loadData', [Crudcontroller::class, 'loadData'])->name('loadData');
gallery.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-fullscreen">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" style="background:#f7f7f7">
<!-- Page Content -->
<div class="container">
<h1 class="fw-light text-center text-lg-start mt-4 mb-0">Thumbnail Gallery</h1><br/>
<form id="fileUploadForm" method="POST" action="{{ route('more_upload_file') }}" enctype="multipart/form-data">
@csrf
<div class="form-group" style="position:relative;">
<label for="more_uploads">Upload More Images</label>
<input type="file" name="more_upload" id="" class="form-control" />
<div class="form-group">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="more_upload" style="position:relative; float:right;">Upload</button>
</form>
<hr class="mt-2 mb-5">
<div class="row text-center text-lg-start" id="loadData">
<!-- images showing here -->
</div>
</div>
</div>
<div class="modal-footer">
<button data-bs-dismiss="modal" class="btn btn-dark" id="select" style="background:#ccc; border:none">Select</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
style & script
<style>
.pointerDissable{
pointer-events:none;
}
.success{
background:green;
}
</style>
<script>
function loadData(){
$.ajax({
url: "{{route('loadDatas')}}",
type:"POST",
data: { _token: '{{csrf_token()}}'},
success: function(data){
$('#loadData').html(data);
}
});
}
$(document).ready(function(){
$('#select').addClass('pointerDissable');
loadData();
$('#select').click(function(){
let radioboxValue = $('input[name="pictures"]:checked').val();
});
});
$(function () {
$(document).ready(function () {
$('#fileUploadForm').ajaxForm({
beforeSend: function (e) {
var percentage = '0'; },
uploadProgress: function (event, position, total, percentComplete) {
var percentage = percentComplete;
$('.progress .progress-bar').css("width", percentage+'%', function() {
return $(this).attr("aria-valuenow", percentage) + "%"; }) },
complete: function (data) {
alert('File has uploaded');
loadData();
}
});
});
});
</script>
