From fcfc2969f3cf64751043317204d8a9c76baa1a6d Mon Sep 17 00:00:00 2001
From: AndreiMazol <72735611+AndreiMazol@users.noreply.github.com>
Date: Mon, 23 Nov 2020 16:30:30 +0300
Subject: [PATCH] #28 Recognize Molecule: pictures in tif-format cannot be
 loaded (#111)

- add check if image preview is supported
- add info message if file is empty or incorrect
---
 src/script/ui/dialog/mainmenu/recognize.jsx | 27 ++++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/script/ui/dialog/mainmenu/recognize.jsx b/src/script/ui/dialog/mainmenu/recognize.jsx
index e38aad295d..610178a830 100644
--- a/src/script/ui/dialog/mainmenu/recognize.jsx
+++ b/src/script/ui/dialog/mainmenu/recognize.jsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 import { connect } from 'react-redux'
 import { range } from 'lodash/fp'
 
@@ -28,6 +28,10 @@ import StructRender from '../../component/structrender'
 import OpenButton from '../../component/view/openbutton'
 import Spin from '../../component/view/spin'
 
+function isImage(file) {
+  return file?.type?.includes('image')
+}
+
 function Recognize(prop) {
   const {
     file,
@@ -44,11 +48,15 @@ function Recognize(prop) {
     onChangeImago,
     ...props
   } = partProps
+  const [canPreviewImage, setCanPreviewImage] = useState(true)
   const result = () =>
     structStr && !(structStr instanceof Promise)
       ? { structStr, fragment }
       : null
-
+  const clearFile = useCallback(() => {
+    onImage(null)
+    return true
+  }, [onImage])
   return (
     <Dialog
       title="Import From Image"
@@ -84,18 +92,25 @@ function Recognize(prop) {
         />
       </label>
       <div className="picture">
-        {file && (
+        {file && isImage(file) && canPreviewImage && (
           <img
             alt=""
             id="pic"
             src={url(file) || ''}
             onError={() => {
-              onImage(null)
-              //TODO: add error handler call
-              //legacy message: Error, it isn't a picture
+              setCanPreviewImage(false)
             }}
           />
         )}
+        {file && isImage(file) && !canPreviewImage && (
+          <div>
+            Preview of '{file.type}' MIME type does not supported by current
+            browser
+          </div>
+        )}
+        {(!file || (!isImage(file) && clearFile())) && (
+          <div>Please choose image</div>
+        )}
       </div>
       <div className="output">
         {structStr &&