Merge bootstrap file input with laravel
Tags: laravel
Published: 2022-10-16 09:39:09

Download bootstrap file input 
[https://github.com/kartik-v/bootstrap-fileinput](https://github.com/kartik-v/bootstrap-fileinput)

## include files 
#### css
```html
<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

```html
<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

```html
<input type="file" multiple id="inp-images"   name="images[]" class="form-control">
```
## init file input
```js


<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>


```


![style input ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gg6pezsl8dmi5tmifkv.png)

### server 

```php
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 
```php 
  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 
```html 
<input type="file" multiple id="inp-images"   name="images[]" class="form-control">
```

#### JS
```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;
    });
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5l4jfkx6rlhar86u9ij.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuy1xr2ue2qsuyvd95uw.png)