Merge bootstrap file input with laravel

#laravel

Download bootstrap file input
https://github.com/kartik-v/bootstrap-fileinput

include files

css

<link rel="stylesheet" href="/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
<link href="{{asset('/file-input/css/fileinput.min.css')}}" rel="stylesheet" type="text/css">

JS

<script src="{{asset('/jquery.js')}}"></script>
<script src="{{asset('/file-input/js/plugins/piexif.min.js')}}"></script>
<script src="{{asset('/file-input/js/plugins/sortable.min.js')}}" ></script>
<script src="{{asset('/file-input/js/fileinput.min.js')}}"></script>
<script src="{{asset('/file-input/themes/fas/theme.min.js')}}"></script>
<script src="{{asset('/file-input/js/locales/LANG.js')}}"></script>

HTML INPUT

<input type="file" multiple id="inp-images"   name="images[]" class="form-control">

init file input



<script>
$("#inp-images").fileinput({
            theme: "fa",
            maxFileCount: 20,
            allowedFileTypes: ['image'],
            showCancel: true,
            showRemove: false,
            showUpload: false,
            overwriteInitial: false,
});
// edit style button remove
$('.fileinput-remove').html('<i class="fa fa-times-circle text-danger"></i>').addClass('rounded p-1 m-1')
        ;
</script>

server

public function store(){
  $images = [];
  $files = $request->images;
   foreach($files as $file){

       $textRandom=Str::random(20).time();
       $extenstion= $file->getClientOriginalExtension();
       $fileName=$textRandom.".".$extenstion;
       $file->move(public_path('uploads/'), $fileName);
       $images[]=[
         "name"=>$fileName
       ];



  }

   Image::insert($images)
}

edit images

server

  public function get_images(){
    $images = Image::get();
    return view('edit',compact('images'));
  }

public function destroyImg($imgId){
        $img=Image::whereId($imgId)->first();


        // check image in database
        if(!$img){
            return response()
                    ->json(['error'=>'Sorry, the image is not in the database']);
        }
        // check image in files
        if(!File::exists('uploads/'.$img->name)){
            return response()
                    ->json(['error'=>'Sorry, the image is not in the file folder']);
        }
        unlink('uploads/'.$img->name);
        $img->delete();
        return true;


    }

blade edit

HTML

<input type="file" multiple id="inp-images"   name="images[]" class="form-control">

JS

  $("#inp-images").fileinput({
            theme: "fa",
            maxFileCount: 20,
            allowedFileTypes: ['image'],
            showCancel: true,
            showRemove: false,
            showUpload: false,
            overwriteInitial: false,
            initialPreview: [
                @foreach($images as $img)
                    "{{ asset('uploads/'.$img->name)}}",
                @endforeach
            ],
            initialPreviewAsData: true,
            initialPreviewConfig: [
                @foreach($images as $img)
                    @php $size=filesize('uploads//'.$img->name);  @endphp
                    { size:"{{$size}}" , width: "120px", url: "{{route('deestroy.img',[$img->id , '_token' => csrf_token()])}}"},
                @endforeach
            ],
     });
     $('.fileinput-remove').
                            html('<i class="fa fa-times-circle text-danger"></i>')
                            .addClass('rounded p-1 m-1')
        ;
    $("#inp-images").on("filepredelete", function(jqXHR) {
    var abort = true;
    if (confirm("Are you sure you want to delete this image?")) {
        abort = false;
    }
    return abort;
    });