input-file-krajee.blade.php 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. {{--
  2. Note: we don't extends the 'input-group-component' blade layout as we have done
  3. with other form components. The reason is that the underlying Krajee file input
  4. plugin already generates an 'input-group' structure and will conflict with the
  5. one provided by the mentioned layout. So instead, we define a new layout.
  6. --}}
  7. {{-- Set errors bag internallly --}}
  8. @php($setErrorsBag($errors ?? null))
  9. {{-- Create the form group layout --}}
  10. <div class="{{ $makeFormGroupClass() }}">
  11. {{-- Input label --}}
  12. @isset($label)
  13. <label for="{{ $id }}" @isset($labelClass) class="{{ $labelClass }}" @endisset>
  14. {{ $label }}
  15. </label>
  16. @endisset
  17. {{-- Krajee file input --}}
  18. <input type="file" id="{{ $id }}" name="{{ $name }}"
  19. {{ $attributes->merge(['class' => $makeItemClass()]) }}>
  20. {{-- Error feedback --}}
  21. @if($isInvalid())
  22. <span class="{{ $makeInvalidFeedbackClass() }}" role="alert">
  23. <strong>{{ $errors->first($errorKey) }}</strong>
  24. </span>
  25. @endif
  26. </div>
  27. {{-- Add the plugin initialization code --}}
  28. @push('js')
  29. <script>
  30. $(() => {
  31. // Initialize the plugin.
  32. $('#{{ $id }}').fileinput( @json($config) );
  33. // Workaround to force setup of invalid class.
  34. @if($isInvalid())
  35. $('#{{ $id }}').closest('.file-input')
  36. .find('.file-caption-name')
  37. .addClass('is-invalid')
  38. $('#{{ $id }}').closest('.file-input')
  39. .find('.file-preview')
  40. .css('box-shadow', '0 .15rem 0.25rem rgba(255,0,0,.25)');
  41. @endif
  42. // Make custom style for particular scenarios (modes).
  43. @if($presetMode == 'avatar')
  44. $('#{{ $id }}').closest('.file-input')
  45. .addClass('text-center')
  46. .find('.file-drop-zone')
  47. .addClass('border-0');
  48. @endif
  49. })
  50. </script>
  51. @endpush