input-file.blade.php 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @extends('adminlte::components.form.input-group-component')
  2. {{-- Set errors bag internallly --}}
  3. @php($setErrorsBag($errors ?? null))
  4. {{-- Set input group item section --}}
  5. @section('input_group_item')
  6. <div class="custom-file">
  7. {{-- Custom file input --}}
  8. <input type="file" id="{{ $id }}" name="{{ $name }}"
  9. {{ $attributes->merge(['class' => $makeItemClass()]) }}>
  10. {{-- Custom file label --}}
  11. <label class="custom-file-label text-truncate" for="{{ $id }}"
  12. @isset($legend) data-browse="{{ $legend }}" @endisset>
  13. {{ $placeholder }}
  14. </label>
  15. </div>
  16. @overwrite
  17. {{-- Add the plugin initialization code --}}
  18. @once
  19. @push('js')
  20. <script>
  21. $(() => {
  22. bsCustomFileInput.init();
  23. })
  24. </script>
  25. @endpush
  26. @endonce
  27. {{-- Setup the height and font size of the plugin when using sm/lg sizes --}}
  28. {{-- NOTE: this may change with newer plugin or Bootstrap versions --}}
  29. @once
  30. @push('css')
  31. <style type="text/css">
  32. {{-- SM size setup --}}
  33. .input-group-sm .custom-file-label:after {
  34. height: 1.8125rem;
  35. line-height: 1.25;
  36. }
  37. .input-group-sm .custom-file-label {
  38. height: calc(1.8125rem + 2px);
  39. line-height: 1.25;
  40. }
  41. .input-group-sm .custom-file {
  42. height: calc(1.8125rem + 2px);
  43. font-size: .875rem;
  44. }
  45. {{-- LG size setup --}}
  46. .input-group-lg .custom-file-label:after {
  47. height: 2.875rem;
  48. line-height: 1.6;
  49. }
  50. .input-group-lg .custom-file-label {
  51. height: calc(2.875rem + 2px);
  52. line-height: 1.6;
  53. }
  54. .input-group-lg .custom-file {
  55. height: calc(2.875rem + 2px);
  56. font-size: 1.25rem;
  57. }
  58. </style>
  59. @endpush
  60. @endonce