57 lines
1.9 KiB
PHP
57 lines
1.9 KiB
PHP
<style>
|
|
.image_preview {
|
|
width: 100%;
|
|
height: 250px;
|
|
border-radius: 8px;
|
|
overflow: hidden
|
|
}
|
|
|
|
.image_preview img{
|
|
widows: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
</style>
|
|
|
|
<div class="row mb-3">
|
|
<label for="thumbnail" class="form-label ol-form-label col-sm-2 col-form-label">{{get_phrase('Thumbnail')}}</label>
|
|
<div class="col-sm-10">
|
|
<input type="file" name="thumbnail" class="form-control ol-form-control" id="thumbnail" accept="image/*" />
|
|
</div>
|
|
|
|
<div class="offset-md-2 offset-lg-3 col-md-10 col-lg-6 fpb-7 mt-3">
|
|
<div class="image_preview">
|
|
<img src="{{ asset($bootcamp_details->thumbnail) }}" id="preview_thumbnail" width="100%" alt="blog-thumbnail">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('js')
|
|
<script>
|
|
$(function() {
|
|
$('#banner, #thumbnail').change(function(e) {
|
|
e.preventDefault();
|
|
|
|
var img_type = $(this).attr('id');
|
|
var x = URL.createObjectURL(event.target.files[0]);
|
|
$('#preview_' + img_type).attr('src', x);
|
|
});
|
|
});
|
|
|
|
document.getElementById('thumbnail').addEventListener('change', function(event) {
|
|
const file = event.target.files[0]; // Get the selected file
|
|
const maxSize = 2 * 1024 * 1024; // 2 MB in bytes
|
|
|
|
// Get the message from Laravel's get_phrase function
|
|
const maxFileSizeMessage = '{{ get_phrase('The maximum file size is 2 MB.') }}';
|
|
|
|
if (file && file.size > maxSize) {
|
|
// If the file is larger than 2 MB, show an alert and reset the input
|
|
alert(maxFileSizeMessage); // Use the translated message
|
|
event.target.value = ''; // Clear the selected file
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|