1. <div class="card m-0 border">
2.     <div class="card-body">
3.         <div class="row photo-upload-holder">
4.             <div class="col-md-6 d-flex align-items-stretch">
5.                 <div class="card m-0 w-100" style="min-height: 200px">
6.                     <div class="card-body d-flex justify-content-center">
7.                         <label class="btn btn-primary photo-upload-label align-self-center" for="{{'upload_'.$name}}"><i class="fa fa-file"></i>  wybierz plik
8.                             <input name="{{$name}}" type="file" id="{{'upload_'.$name}}" accept="image/*" onchange="readURL(this);">
9.                         </label>
10.                     </div>
11.                 </div>
12.             </div>
13.             <div class="col-md-6 d-flex align-items-stretch">
14.                 <div class="card border m-0 w-100 photo-upload-preview"  style="background-image: url({{$value ?? 'http://placehold.it/180'}})">
15.                 </div>
16.             </div>
17.         </div>
18.     </div>
19. </div>
20. @push('js')
21.     <script>
22.         function readURL(input) {
23.             if (input.files && input.files[0]) {
24.                 var reader = new FileReader();
25.                 reader.onload = function (e) {
26.                     $(input).closest('.photo-upload-holder')
27.                         .find('.photo-upload-preview')
28.                         .css('background-image', 'url(' + e.target.result + ')');
29.                 };
30.                 reader.readAsDataURL(input.files[0]);
31.             }
32.         }
33.     </script>
34. @endpush
35. @push('style')
36.     <style>
37.         img{
38.             max-width:180px;
39.         }
40.         .photo-upload-label {
41.             cursor: pointer;
42.         }
43.         .photo-upload-label input[type=file]{
44.             position: absolute;
45.             bottom: -100px;
46.             visibility: hidden;
47.         }
48.         .photo-upload-preview {
49.             background-size: contain;
50.             background-repeat: no-repeat;
51.             background-position: center;
52.         }
53.     </style>
54. @endpush
55.