IMPROVEMENT: Imported images should have restricted file extensions (closes #368)

Co-authored-by: Lakhdar Berache <amineberache1@gmail.com>

Author: CocoChart

frontend/src/menu-items/PictureUploadAction.jsx

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
+import { NotificationManager } from 'react-notifications';
 
 import DiscreeteDropdown from '../components/DiscreeteDropdown';
 
-function PictureUploadAction ({ id, backend, handleImageUrl }) {
+function PictureUploadAction({ id, backend, handleImageUrl }) {
   const fileInputRef = useRef(null);
 
   const handleClick = () => {
@@ -11,7 +12,15 @@ function PictureUploadAction ({ id, backend, handleImageUrl }) {
 
   const handleFileChange = (event) => {
     const file = event.target.files[0];
-    if (file) backend.putAttachment(id, file, (response) => {
+
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      NotificationManager.warning('Please choose an image file (png,jpg,jpeg...).', '', 2000);
+      return;
+    }
+
+    backend.putAttachment(id, file, (response) => {
       handleImageUrl(`![<IMAGE DESCRIPTION>](${response.url})`);
     });
   };
@@ -24,6 +33,7 @@ function PictureUploadAction ({ id, backend, handleImageUrl }) {
       <input
         id="image-input"
         type="file"
+        accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
         ref={fileInputRef}
         style={{ display: 'none' }}
         onChange={handleFileChange}