Resolve "Displaying a prompt message when uploading wrong format of overlay"

Closes #291 (closed)

src/redux/overlays/overlays.thunks.ts

@@ -15,6 +15,7 @@ import { showToast } from '@/utils/showToast';
 import { ThunkConfig } from '@/types/store';
 import { BASE_API_URL } from '@/constants';
 import { getError } from '@/utils/error-report/getError';
+import axios from 'axios';
 import { apiPath } from '../apiPath';
 import {
   CHUNK_SIZE,
@@ -221,7 +222,12 @@ export const addOverlay = createAsyncThunk<undefined, AddOverlayArgs, ThunkConfi
 
       showToast({ type: 'success', message: USER_OVERLAY_ADD_SUCCESS_MESSAGE });
     } catch (error) {
-      return Promise.reject(getError({ error, prefix: USER_OVERLAY_ADD_ERROR_PREFIX }));
+      if (axios.isAxiosError(error) && error.code === 'ERR_BAD_REQUEST') {
+        const data = error.response?.data;
+        showToast({ type: 'error', message: data.reason, duration: 120000 });
+      } else {
+        return Promise.reject(getError({ error, prefix: USER_OVERLAY_ADD_ERROR_PREFIX }));
+      }
     }
   },
 );