setting upload overlay status

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.module.scss

@@ -94,19 +94,8 @@ $secondary: $gray-600 !default;
   .dropzone {
     position: relative; // against .overlay position: absolute
 
-
     @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
 
-    // unuploadable or rejected
-    &.dropzone-rejected {
-      .overlay.overlay-dropzone-active {
-        background: rgba(200, 200, 200, 0.8);
-
-        .overlay-content {
-          color: $gray-300;
-        }
-      }
-    }
 
     // uploading
     &.dropzone-uploading {
@@ -123,8 +112,8 @@ $secondary: $gray-600 !default;
 
     }
 
-    // unuploadable
-    &.dropzone-unuploadable {
+    // diabled
+    &.dropzone-disabled {
       .overlay.overlay-dropzone-active {
         .overlay-content {
           // insert content
@@ -141,7 +130,7 @@ $secondary: $gray-600 !default;
     // uploadable
     // &.dropzone-uploadable {
     // accepted
-    &.dropzone-accepted:not(.dropzone-rejected) {
+    &.dropzone-accepted {
       .overlay.overlay-dropzone-active {
         border: 4px dashed $gray-300;
 
@@ -162,7 +151,7 @@ $secondary: $gray-600 !default;
     }
 
     // file type mismatch
-    &.dropzone-rejected:not(.dropzone-uploadablefile) {
+    &.dropzone-mismatch-picture {
       .overlay.overlay-dropzone-active {
         .overlay-content {
           // insert content
@@ -175,6 +164,17 @@ $secondary: $gray-600 !default;
         }
       }
     }
+
+    // rejected
+    &.dropzone-rejected {
+      .overlay.overlay-dropzone-active {
+        background: rgba(200, 200, 200, 0.8);
+
+        .overlay-content {
+          color: $gray-300;
+        }
+      }
+    }
     /* end of.dropzone */
   }
 }

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -103,26 +103,10 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     getRootProps,
     isDragActive,
-    isDragAccept,
-    isUploading,
-    isDragReject,
+    fileUploadState,
     open,
   } = useFileDropzone({ onUpload, acceptedFileType });
 
-  const dropzoneClassName = useMemo(() => {
-    if (isUploading) {
-      return 'dropzone-uploading';
-    }
-    if (isDragAccept) {
-      // return 'dropzone-accepted';
-      return 'dropzone-regected';
-    }
-    if (isDragReject) {
-      return 'dropzone-regected';
-    }
-    return '';
-  }, [isDragAccept, isDragReject, isUploading]);
-
   const renderOverlay = useCallback(() => {
     if (isDragActive) {
       return (
@@ -137,7 +121,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   return (
     <div className={`${style['codemirror-editor']} flex-expand-vert`}>
-      <div {...getRootProps()} className={`dropzone ${dropzoneClassName} flex-expand-vert`}>
+      <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         {renderOverlay()}
         <CodeMirrorEditorContainer ref={containerRef} />
         <Toolbar onFileOpen={open} acceptedFileType={acceptedFileType} />

packages/editor/src/services/file-dropzone/use-file-dropzone.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { useDropzone, Accept } from 'react-dropzone';
 import type { DropzoneState } from 'react-dropzone';
@@ -7,6 +7,7 @@ import { AcceptedUploadFileType } from '../../consts';
 
 type FileDropzoneState = DropzoneState & {
   isUploading: boolean,
+  fileUploadState: string,
 }
 
 type DropzoneEditor = {
@@ -37,7 +38,7 @@ export const useFileDropzone = (props: DropzoneEditor): FileDropzoneState => {
 
   const disabled = acceptedFileType === AcceptedUploadFileType.NONE;
 
-  const dropzoneState = useDropzone({
+  const dzState = useDropzone({
     noKeyboard: true,
     noClick: true,
     disabled,
@@ -45,8 +46,41 @@ export const useFileDropzone = (props: DropzoneEditor): FileDropzoneState => {
     accept,
   });
 
+  const fileUploadState = useMemo(() => {
+
+    if (isUploading) {
+      return 'dropzone-uploading';
+    }
+
+    switch (acceptedFileType) {
+      case AcceptedUploadFileType.NONE:
+        return 'dropzone-disabled';
+
+      case AcceptedUploadFileType.IMAGE:
+        if (dzState.isDragAccept) {
+          return 'dropzone-accepted';
+        }
+        if (dzState.isDragReject) {
+          return 'dropzone-mismatch';
+        }
+        break;
+
+      case AcceptedUploadFileType.ALL:
+        if (dzState.isDragAccept) {
+          return 'dropzone-accepted';
+        }
+        if (dzState.isDragReject) {
+          return 'dropzone-rejected';
+        }
+        break;
+    }
+
+    return '';
+  }, [isUploading, dzState.isDragAccept, dzState.isDragReject, acceptedFileType]);
+
   return {
-    ...dropzoneState,
+    ...dzState,
     isUploading,
+    fileUploadState,
   };
 };