From 01a4e57d25a1fa88a67633783dd978f22fc38ad8 Mon Sep 17 00:00:00 2001 From: jitendra Date: Tue, 30 Jun 2020 16:19:35 +0530 Subject: [PATCH] Issue #3354 fixed --- .../views/layouts/header/index.blade.php | 106 ++++++++------- .../views/shop/UI/particals.blade.php | 123 ++++++++++-------- 2 files changed, 125 insertions(+), 104 deletions(-) diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php index 889fec10e..175c7abc2 100755 --- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php @@ -242,42 +242,70 @@ methods: { uploadImage: function() { - var self = this; + var imageInput = this.$refs.image_search_input; - self.$root.showLoader(); + if (imageInput.files && imageInput.files[0]) { + if (imageInput.files[0].type.includes('image/')) { + var self = this; - var formData = new FormData(); + self.$root.showLoader(); - formData.append('image', this.$refs.image_search_input.files[0]); + var formData = new FormData(); - axios.post("{{ route('shop.image.search.upload') }}", formData, {headers: {'Content-Type': 'multipart/form-data'}}) - .then(function(response) { - self.uploaded_image_url = response.data; + formData.append('image', imageInput.files[0]); - var net; + axios.post("{{ route('shop.image.search.upload') }}", formData, {headers: {'Content-Type': 'multipart/form-data'}}) + .then(function(response) { + self.uploaded_image_url = response.data; - async function app() { - var analysedResult = []; + var net; - var queryString = ''; + async function app() { + var analysedResult = []; - net = await mobilenet.load(); + var queryString = ''; - const imgElement = document.getElementById('uploaded-image-url'); + net = await mobilenet.load(); - try { - const result = await net.classify(imgElement); + const imgElement = document.getElementById('uploaded-image-url'); - result.forEach(function(value) { - queryString = value.className.split(','); + try { + const result = await net.classify(imgElement); - if (queryString.length > 1) { - analysedResult = analysedResult.concat(queryString) - } else { - analysedResult.push(queryString[0]) - } - }); - } catch (error) { + result.forEach(function(value) { + queryString = value.className.split(','); + + if (queryString.length > 1) { + analysedResult = analysedResult.concat(queryString) + } else { + analysedResult.push(queryString[0]) + } + }); + } catch (error) { + self.$root.hideLoader(); + + window.flashMessages = [ + { + 'type': 'alert-error', + 'message': "{{ __('shop::app.common.error') }}" + } + ]; + + self.$root.addFlashMessages(); + }; + + localStorage.searched_image_url = self.uploaded_image_url; + + queryString = localStorage.searched_terms = analysedResult.join('_'); + + self.$root.hideLoader(); + + window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1'; + } + + app(); + }) + .catch(function(error) { self.$root.hideLoader(); window.flashMessages = [ @@ -288,31 +316,13 @@ ]; self.$root.addFlashMessages(); - }; + }); + } else { + imageInput.value = ''; - localStorage.searched_image_url = self.uploaded_image_url; - - queryString = localStorage.searched_terms = analysedResult.join('_'); - - self.$root.hideLoader(); - - window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1'; - } - - app(); - }) - .catch(function(error) { - self.$root.hideLoader(); - - window.flashMessages = [ - { - 'type': 'alert-error', - 'message': "{{ __('shop::app.common.error') }}" - } - ]; - - self.$root.addFlashMessages(); - }); + alert('Only images (.jpeg, .jpg, .png, ..) are allowed.'); + } + } } } }); diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php index f8e343d74..56b0129ac 100644 --- a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php +++ b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php @@ -361,75 +361,86 @@ methods: { uploadImage: function() { - this.$root.showLoader(); - var formData = new FormData(); + var imageInput = this.$refs.image_search_input; - formData.append('image', this.$refs.image_search_input.files[0]); + if (imageInput.files && imageInput.files[0]) { + if (imageInput.files[0].type.includes('image/')) { + this.$root.showLoader(); - axios.post( - "{{ route('shop.image.search.upload') }}", - formData, - { - headers: { - 'Content-Type': 'multipart/form-data' - } - } - ).then(response => { - var net; - var self = this; - this.uploadedImageUrl = response.data; + var formData = new FormData(); + formData.append('image', imageInput.files[0]); - async function app() { - var analysedResult = []; - - var queryString = ''; - - net = await mobilenet.load(); - - const imgElement = document.getElementById('uploaded-image-url'); - - try { - const result = await net.classify(imgElement); - - result.forEach(function(value) { - queryString = value.className.split(','); - - if (queryString.length > 1) { - analysedResult = analysedResult.concat(queryString) - } else { - analysedResult.push(queryString[0]) + axios.post( + "{{ route('shop.image.search.upload') }}", + formData, + { + headers: { + 'Content-Type': 'multipart/form-data' } - }); - } catch (error) { - self.$root.hideLoader(); + } + ).then(response => { + var net; + var self = this; + this.uploadedImageUrl = response.data; + + + async function app() { + var analysedResult = []; + + var queryString = ''; + + net = await mobilenet.load(); + + const imgElement = document.getElementById('uploaded-image-url'); + + try { + const result = await net.classify(imgElement); + + result.forEach(function(value) { + queryString = value.className.split(','); + + if (queryString.length > 1) { + analysedResult = analysedResult.concat(queryString) + } else { + analysedResult.push(queryString[0]) + } + }); + } catch (error) { + self.$root.hideLoader(); + + window.showAlert( + `alert-danger`, + this.__('shop.general.alert.error'), + "{{ __('shop::app.common.error') }}" + ); + } + + localStorage.searchedImageUrl = self.uploadedImageUrl; + + queryString = localStorage.searched_terms = analysedResult.join('_'); + + self.$root.hideLoader(); + + window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1'; + } + + app(); + }).catch(() => { + this.$root.hideLoader(); window.showAlert( `alert-danger`, this.__('shop.general.alert.error'), "{{ __('shop::app.common.error') }}" ); - } + }); + } else { + imageInput.value = ''; - localStorage.searchedImageUrl = self.uploadedImageUrl; - - queryString = localStorage.searched_terms = analysedResult.join('_'); - - self.$root.hideLoader(); - - window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1'; + alert('Only images (.jpeg, .jpg, .png, ..) are allowed.'); } - - app(); - }).catch(() => { - this.$root.hideLoader(); - - window.showAlert( - `alert-danger`, - this.__('shop.general.alert.error'), - "{{ __('shop::app.common.error') }}" - ); - }); + } } } });