Viewing file:  index.blade.php (2.76 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('frontend.layouts.app', ['class' => 'bg-white'])
@section('content')
<!--==== START CONTENT ====-->
<section class="my-5 pb-5" >
<div class="col-12 ">
<div class="text-center image-search">
<h2 class="notfoundtxt mt-3 text-center mb-0 text-black">Search Product By Image</h2>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file"><span>Select Picture</span> <i class="fas fa-camera"></i> </label>
<div id="imagePreview" class="my-3"></div>
<div class="search-loading my-3 d-none">
<img src="{{asset('frontend/images')}}/search.gif" alt="search" height="150">
<h3 class="my-2 heading-lg">Searching...</h3>
</div>
</div>
<div class="search-result">
<div class="product-gird">
<ul class=" product prod-grid-col5 " id="search-result">
</ul>
</div>
</div>
</div>
</section>
<!--==== END CONTENT ====-->
@push('js')
<script type="text/javascript">
const inputs = document.querySelectorAll(".inputfile");
for (let input of inputs) {
const label = input.nextElementSibling;
const labelVal = label.innerHTML;
input.addEventListener("change", (e) => {
let fileName = "";
var allowedExtensions =/(\.jpg|\.jpeg|\.png)$/i;
if (!allowedExtensions.exec(e.target.value)) {
alert('Invalid file type');
input.value = '';
return false;
}
else
{
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById(
'imagePreview').innerHTML =
'<img src="' + e.target.result
+ '" height="150"/>';
};
reader.readAsDataURL(e.target.files[0]);
fileName = e.target.value.split("\\").pop();
if (fileName) {
label.querySelector("span").innerHTML = fileName;
} else {
label.innerHTML = labelVal;
}
$('.search-loading').removeClass('d-none');
$('#search-result').empty();
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var formData = new FormData();
formData.append("image",e.target.files[0]);
formData.append('_token',CSRF_TOKEN);
$.ajax({
url: "{{route('image.do-image-search')}}",
type: 'post',
contentType: false,
processData: false,
data:formData,
success: function (response) {
$('.search-loading').addClass('d-none');
if(response.status == 1){
$('#search-result').append(response.data);
$("img.lazy").lazyload({
effect:'fadein',
placeholder_data_img:"{{config('constant.image_loader')}}"
});
}
}
});
}
});
}
</script>
@endpush
@endsection
|